********在li中，鼠标经过li时，li出现边框，同时文字被遮罩层遮盖，且li与遮罩层中的链接均可点击*********
以下提供两种方法
1、定位之后用使用过渡属性使bottom：-60px；变为bottom：0；
2、定位之后用使用过渡属性使绝对定位的盒子opacity：0；变为opacity：1；
注意：li的边框先设置为1px 颜色为透明（主要是占据位置），否则在鼠标经过li时盒子会上下移动
<!DOCTYPE html>
<html lang=”en”>
<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>鼠标经过li时出现遮罩且可以点击li里面的图片链接</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 800px;
margin: 20px auto;
overflow: hidden;
}
li {
position: relative;
float: left;
list-style: none;
width: 180px;
height: 304px;
margin-right: 10px;
margin-bottom: 10px;
overflow: hidden;
box-sizing: border-box;
/* 占据位置，否则鼠标经过li时图片会动 */
border: 1px solid transparent;
transition: border 1s;
}
img {
width: 180px;
height: 200px;
vertical-align: middle;
}
.box {
width: 180px;
height: 104px;
background-color: red;
margin: 0 auto;
}
/* 方法1 */
/* .box-ab {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: purple;
opacity: 0;
} */
/* 方法2 */
.box-ab {
position: absolute;
bottom: -60px;
left: 0;
width: 100%;
height: 60px;
background-color: purple;
transition: all 1s;
}
li:hover {
border: 1px solid red;
}
li:hover .box-ab {
/* opacity: 1; */
bottom: 0;
}
</style>
</head>
<body>
<ul class=”list”>
<li>
<a href=””><img src=”./uploads/brand_goods_1.jpg” alt=”纯css实现鼠标经过li出现遮罩层且遮罩层链接与li中的链接均可点击”>
<div class=”box”>
</div>
<div class=”box-ab”>
</div>
</li>
<li>
<a href=””><img src=”./uploads/brand_goods_1.jpg” alt=”纯css实现鼠标经过li出现遮罩层且遮罩层链接与li中的链接均可点击”>
<div class=”box”>
</div>
<div class=”box-ab”>
</div>
</li>
<li>
<a href=””><img src=”./uploads/brand_goods_1.jpg” alt=”纯css实现鼠标经过li出现遮罩层且遮罩层链接与li中的链接均可点击”>
<div class=”box”>
</div>
<div class=”box-ab”>
</div>
</li>
<li>
<a href=””><img src=”./uploads/brand_goods_1.jpg” alt=”纯css实现鼠标经过li出现遮罩层且遮罩层链接与li中的链接均可点击”>
<div class=”box”>
</div>
<div class=”box-ab”>
</div>
</li>
<li>
<a href=””><img src=”./uploads/brand_goods_1.jpg” alt=”纯css实现鼠标经过li出现遮罩层且遮罩层链接与li中的链接均可点击”>
<div class=”box”>
</div>
<div class=”box-ab”>
</div>
</li>
<li>
<a href=””><img src=”./uploads/brand_goods_1.jpg” alt=”纯css实现鼠标经过li出现遮罩层且遮罩层链接与li中的链接均可点击”>
<div class=”box”>
</div>
<div class=”box-ab”>
</div>
</li>
<li>
<a href=””><img src=”./uploads/brand_goods_1.jpg” alt=”纯css实现鼠标经过li出现遮罩层且遮罩层链接与li中的链接均可点击”>
<div class=”box”>
</div>
<div class=”box-ab”>
</div>
</li>
<li>
<a href=””><img src=”./uploads/brand_goods_1.jpg” alt=”纯css实现鼠标经过li出现遮罩层且遮罩层链接与li中的链接均可点击”>
<div class=”box”>
</div>
<div class=”box-ab”>
</div>
</li>
</ul>
</body>
</html>
暂无评论内容