尝试将覆盖添加到绝对定位的图像。下面的代码可以正常工作,但并不完美。
已经尝试过使用 z-index 属性,但没有成功。
下面是代码在 Codepen 上的工作示例。
http://codepen.io/anon/pen/pRdmaX
HTML
<div class="test">
<img src="http://lorempixel.com/output/food-q-c-80-80-6.jpg" alt="image" class="img-responsive">
<i class="fa fa-plus"></i>
<h2>Lorem Ipsum</h2>
<p>text</p>
</div>
CSS
.test {
position: relative;
padding-left: 97px;
margin-bottom: 42px;
padding-top: 18px;
}
.test img {
position: absolute;
left: 0;
top: 6%;
border: 3px solid #FFF;
max-width: 80px;
cursor: pointer;
}
.test img:hover + i {
opacity: .7;
top: 7px;
}
.test i {
background: #ccc none repeat scroll 0 0;
color: #ffffff;
font-size: 20px;
top: -50%;
left: 3px;
line-height: 68px;
position: absolute;
text-align: center;
width: 74px;
height: 74px;
transition: .3s;
opacity: 0;
}
.test h2 {
margin-top: 0;
margin-bottom: 0;
}
最佳答案
只需将 pointer-events: none
添加到您的 .test i
规则,它就会正常运行(悬停时不会闪烁)
要使其匹配 img
的位置/大小,请使用相同的位置/大小值
.test {
position: relative;
padding-left: 97px;
margin-bottom: 42px;
padding-top: 18px;
}
.test img {
position: absolute;
left: 0;
top: 6%;
border: 3px solid #FFF;
width: 80px;
cursor: pointer;
}
.test img:hover + i {
opacity: .7;
top: 6%;
}
.test i {
background: #ccc none repeat scroll 0 0;
color: #ffffff;
font-size: 20px;
top: -50%;
left: 0;
top: 6%;
border: 3px solid #FFF;
width: 80px;
height: 80px;
line-height: 68px;
position: absolute;
text-align: center;
transition: .3s;
opacity: 0;
pointer-events: none;
}
.test h2 {
margin-top: 0;
margin-bottom: 0;
}
<div class="test">
<img src="http://lorempixel.com/output/food-q-c-80-80-6.jpg" alt="image" class="img-responsive">
<i class="fa fa-plus"></i>
<h2>Lorem Ipsum</h2>
<p>text</p>
</div>
根据评论添加了第二个示例
.test {
position: relative;
padding-left: 97px;
margin-bottom: 42px;
padding-top: 18px;
}
.test a {
position: absolute;
left: 0;
top: 6%;
border: 3px solid #FFF;
width: 80px;
cursor: pointer;
}
.test a:hover + i {
opacity: .7;
top: 6%;
}
.test i {
background: #ccc none repeat scroll 0 0;
color: #ffffff;
font-size: 20px;
top: -50%;
left: 0;
top: 6%;
border: 3px solid #FFF;
width: 80px;
height: 80px;
line-height: 68px;
position: absolute;
text-align: center;
transition: .3s;
opacity: 0;
pointer-events: none;
}
.test h2 {
margin-top: 0;
margin-bottom: 0;
}
<div class="test">
<a href="#"><img src="http://lorempixel.com/output/food-q-c-80-80-6.jpg" alt="image" class="img-responsive"></a>
<i class="fa fa-plus"></i>
<h2>Lorem Ipsum</h2>
<p>text</p>
</div>
关于html - 如何向绝对定位元素添加叠加层?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41920322/