Html CSS叠加IMG悬停

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

这是我的图像元素

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

---

有没有办法在不向HTML添加额外图像的情况下执行此操作？

我会向父div添加背景色，并更改悬停时的不透明度：

---

我认为最简单的方法是添加一个div覆盖元素。我知道这不是你想做的，但没有“覆盖”的css功能的图像

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

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

.overlay{
    width:100%; 
    height:100%; 
    position:absolute;
    z-index:50;
}  

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

---

您可以从两个单独的图像中创建一个精灵，一个在另一个上面，并执行以下操作：

html:

问题是img显示在li的顶部。正因为如此，我认为没有任何办法让li在img上显示一些东西。在本例中，我将使用JavaScript添加您想要的效果

，我将在下面解释：

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

<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>

此处的跨度包含一个半透明png图像，将在覆盖中使用。默认情况下，不会显示范围，但我们只能在用户将鼠标悬停在图像上时使用JavaScript添加范围

下面是使用jQuery的JavaScript，我使用：

$(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();
    });
});

---

再次。它显示了这是如何工作的，并使默认标记稍微不那么凌乱。

您想要达到什么效果？悬停时颜色稍深/稍浅？与上述海报相同。这就是我现在想要做的。我添加图像是至关重要的，因为图像包含一个图形按钮和一些文本。不可能使用z索引将覆盖添加到“封面图像：悬停”中，因此当悬停时，图像显示在内容图像上方。这将避免空div。如果您想知道.cover图像是否会出现在img前面，则不可能，因为img是.cover图像的子对象。更改父对象的z索引将带来其所有子对象。很好的解决方案，只是图像不同。大约有800张图片，我必须为每张图片创建一个精灵。@GV1也许你可以使用类似的东西。我将采用这个解决方案。谢谢。在您第一次悬停之前，不会加载图像，这可能会造成延迟。您可能想考虑一种预加载图像的方法。

<li class="cover-image"></li>

#covers li ul .cover-image {
   background-image: url('sprite.png') 0 0 no-repeat;
   width: 700px;
   height: 250px;
}

#covers li ul .cover-image:hover {
   background-position:0px -250px;
}

<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>

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;
}

$(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();
    });
});