css 弹出层
程序员文章站
2022-05-06 09:43:26
...
弹出层：鼠标移动到图片上，会有一个弹出层显示在上面。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出层</title>
<link rel="stylesheet" href="../css/pop.css">
</head>
<body>
<figure><img src="../img/zz.jpg" alt="zz">
<figcaption>
<h3>zzzzzzzzz</h3>
<a href="#">More info</a>
</figcaption>
</figure>
<figure><img src="../img/zz.jpg" alt="zz">
<figcaption>
<h3>zzzzzzzzz</h3>
<a href="#">More info</a>
</figcaption>
</figure>
<figure><img src="../img/zz.jpg" alt="zz">
<figcaption>
<h3>zzzzzzzzz</h3>
<a href="#">More info</a>
</figcaption>
</figure>
<figure><img src="../img/zz.jpg" alt="zz">
<figcaption>
<h3>zzzzzzzzz</h3>
<a href="#">More info</a>
</figcaption>
</figure>
</body>
</html>scss:
* {
padding: 0;
margin: 0;
}
img {
width: 200px;
display: block;
border: 1px solid #666;
&:hover ~figcaption {
display: block;
}
}
figure {
margin: 20px 20px;
float: left;
position: relative;
}
figcaption {
display: none;
padding: 10px;
background: #e8e8e8;
border: 1px solid black;
border-radius: 6px;
position: absolute;
left: 80%;
top: 50%;
z-index: 2;
&::after {
content: "";
position: absolute;
border: $triw solid;
border-color: transparent red transparent transparent;
top: calc(50% - #{$triw});
left: -$triw*2;
}
}