2

我有一个像这样设置为背景的图像

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

我正在尝试用户：悬停

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

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

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

4

2 回答 2

3

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

http://jsfiddle.net/nDHbD/

于 2013-07-22T14:36:31.730 回答
2

您可以在 .about 上面放置一个 div，然后让它在 :hover 上显示它的图像，这样，两个图像都会显示。更好的是，您可以在新 div 上制作过渡动画，使其顺利进行。

于 2013-07-22T14:32:09.830 回答