CSS3 마우스 위로 버튼 띄우기 상자 보이기 효과
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
text-align: center;
}
p {
margin: 100px;
}
.tip {
display: inline-block;
position: relative;
}
.tip:before, .tip:after {
opacity: 0; /* */
position: absolute;
z-index: 1000; /* */
/* ， .tip-*:hover:before, .tip-*:hover:after ;
0.3s: ,ease: ， ， */
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
}
.tip:before {
content: '';
border: 6px solid transparent;
}
.tip:after {
content: attr(data-tip); /* */
padding: 5px;
white-space: nowrap; /* */
background-color: #000000;
color: #ffffff;
}
.tip:hover:before, .tip:hover:after {
opacity: 1; /* */
z-index: 1000;
}
/*top*/
.tip-top:before {
bottom: 100%;
left: 50%;
border-top-color: rgba(0, 0, 0, 0.8); /* */
margin-left: -3px;
margin-bottom: -12px;
}
.tip-top:after {
bottom: 100%;
left: 50%;
margin-left: -6px;
}
.tip-top:hover:before {
margin-bottom: -6px;
}
.tip-top:hover:after {
margin-bottom: 6px;
}
/*bottom*/
.tip-bottom:before {
top: 100%;
left: 50%;
border-bottom-color: rgba(0, 0, 0, 0.8);
margin-left: -3px;
margin-top: -9px;
}
.tip-bottom:after {
top: 100%;
left: 50%;
margin-left: -6px;
margin-top: 3px;
}
.tip-bottom:hover:before {
margin-top: -3px;
}
.tip-bottom:hover:after {
margin-top: 9px;
}
/*right*/
.tip-right:before {
top: 50%;
left: 100%;
border-right-color: rgba(0, 0, 0, 0.8);
margin-left: -9px;
margin-top: -3px;
}
.tip-right:after {
top: 50%;
left: 100%;
margin-left: 3px;
margin-top: -6px;
}
.tip-right:hover:before {
margin-left: -3px;
}
.tip-right:hover:after {
margin-left: 9px;
}
/*left*/
.tip-left:before {
top: 50%;
left: 0%;
border-left-color: rgba(0, 0, 0, 0.8);
margin-left: 0px;
margin-top: -3px;
}
.tip-left:after {
top: 50%;
right: 100%;
margin-right: 0px;
margin-top: -6px;
}
.tip-left:hover:before {
margin-left: -6px;
}
.tip-left:hover:after {
margin-right: 6px;
}
style>
head>
<body>
<p>
<button class="tip tip-top" data-tip=" "> button>
p>
<p>
<button class="tip tip-bottom" data-tip=" "> button>
p>
<p>
<button class="tip tip-right" data-tip=" "> button>
p>
<p>
<button class="tip tip-left" data-tip=" "> button>
p>
body>
html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
CSS3의 Z-Index는 무엇이며 왜 사용합니까?Z-색인은 HTML 요소를 쌓는 순서 또는 우선 순위를 정의하는 데 사용되는 CSS 속성입니다. z-index 값이 높은 요소는 더 높은 우선순위를 가지며 z-index 값이 작은 요소(-1,-2와 같은 음수 값)는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
