Question

我将图像设置为背景，如此

.about {
    height: 351px;
    background-image:url("../images/about.png");
    background-position:center;
    background-repeat:no-repeat;
}

我正在尝试用户：悬停

.about:hover {
    background-image:url("../images/hover.png");
}

在顶部显示另一张图片。我希望原始图片仍然存在，因为悬停图像具有透明度。

这种方式取代了图像，有没有办法不替换它，只是将鼠标悬停在原始图像上？

Answer 1

您需要一个面具或.about元素内的元素（或绝对定位在其上）。遮罩将悬停图像作为背景，但具有visibility:hidden。然后，当.about元素处于悬停状态时，它会激活掩码。 .about:hover .about-mask {visibility: visible;}。专业提示：使用visibility:hidden代替display:none可以让浏览器加载图片，即使它不可见，因此您不会有任何闪烁。

http://jsfiddle.net/nDHbD/

Answer 2

您可以在.about上方放置一个div，然后让它显示它的图像：悬停，这样两个图像都会显示。更好的是，您可以为新div设置转换动画，以便顺利进行。

将img悬停在background-image css上

2 个答案: