<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="img_div">
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.cn_mIqJN0Td_0Ono0xMEsQHaLL?rs=1&pid=ImgDetMain" />
<a href="#">
<div class="mask">
<h3>0000</h3>
</div>
</a>
</div>
<div class="img_div">
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.cn_mIqJN0Td_0Ono0xMEsQHaLL?rs=1&pid=ImgDetMain" />
<a href="#">
<div class="mask">
<h3>1111</h3>
</div>
</a>
</div>
</body>
<style>
.img_div {
position: relative;
width: 500px;
height:500px;
}
.img_div img{
width: 100%;
height:100%;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
background: rgba(101, 101, 101, 0.6);
color: #ffffff;
opacity: 0;
}
.mask h3 {
text-align: center;
}
.img_div a:hover .mask {
opacity: 1;
}
</style>
</html>
css 实现 鼠标停放显示遮罩层的内容
于 2024-05-29 09:28:06 首次发布