html - CSS 叠加 IMG 悬停

Question

当图像悬停时，我试图在图像上叠加透明 PNG。我希望它是语义化的，即我不想为了样式或可用性而向 HTML 添加不必要的元素和图像。

这是我的图片元素

<li class="cover-image"><img src="image.png" width="700" height="250"></li>

这是我尝试过的 CSS

#covers li ul .cover-image
{
margin: 10px 0;
display: block;
width: 700px;
height: 250px;
}

#covers li ul .cover-image img:hover
{
background: url('../images/cover-overlay.png') top left no-repeat;
}

有没有办法在不向 HTML 添加额外图像的情况下做到这一点？

Answer 1

问题是 img 显示在 li 之上。因此，我认为没有任何方法可以让 li 在 img 的“顶部”显示某些内容。在这种情况下，我会使用 JavaScript 来添加您正在寻找的效果。

I've created a JSFiddle you can look at for reference ，我将在下面解释:

首先，我设置了一些类似于您上面描述的标记:

<ul>
    <li class="cover-image"><img src="http://www.gravatar.com/avatar/3114d84a5c5144b2a531c610c913bdb9?s=128&d=identicon&r=PG" width="700" height="250"></li>
</ul>

然后我使用了类似的 CSS，并添加了一个新的 span.over 声明:

ul li.cover-image span.over
{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 700px;
    height: 250px;
    z-index: 32;
    background-image: url('http://shipsstarthere.ca/img/trans-bg.png');
    pointer-events: none;
}

此处的span 包含将在叠加层中使用的半透明png 图像。默认情况下，span 不显示，但我们可以使用 JavaScript 仅在用户将鼠标悬停在图像上时添加它。

这是我使用的 JavaScript(使用 jQuery):

$(document).ready(function() {
    $('ul li.cover-image img').hover(function() {
        $('ul li.cover-image').append('<span class="over"></span>');
    }, function() {
        $('ul li.cover-image span').remove();
    });
});

再次，take a look at the JSFiddle example .它显示了这是如何工作的，并使默认标记稍微不那么困惑。