我很难在将鼠标悬停在图像上时显示颜色叠加层(和图像)。
基本上,用户应该看到这个叠加层(在下面的 2 中分开):
我有以下 HTML 片段:
<ul id="Grid">
<li class="mix category_1 mix_all" style="display: inline-block; opacity: 1;">
<img src="http://i.imgur.com/J4PaouI.jpg" alt="#">
</li>
</ul>
这是特定的 CSS(还有一个 z-index 只是为了确定):
.mix_all:hover {
background: url(http://i.imgur.com/0lu7dWs.png) no-repeat center !important;
background-color: #de6573 !important;
z-index: 99999999;
}
#Grid .mix {
width: 200px;
height: 200px;
margin-bottom: 20px;
}
.mix.mix_all img {
max-height: 200px;
max-width: 200px;
}
这是 fiddle 的链接:
最佳答案
这是一个正确的版本:http://jsfiddle.net/maximgladkov/b2twr/1/
您应该添加一个带有 position: absolute
的附加元素并显示它。
HTML
<ul id="Grid">
<li class="mix category_1 mix_all">
<img src="http://i.imgur.com/J4PaouI.jpg" alt="#" />
<div class="overlay"></div>
</li>
</ul>
CSS
.mix_all {
position: relative;
}
.mix_all .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mix_all:hover .overlay {
background: url(http://i.imgur.com/0lu7dWs.png) no-repeat center !important;
background-color: #de6573 !important;
z-index: 99999999;
}
关于css - 悬停时的图像和颜色叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21809684/