2

当您将鼠标悬停在产品图片上时，我有这张图片想要显示在我的产品图片之上。

http://i47.tinypic.com/vz2oj.gif

这就是我正在使用的：

.centerBoxContentsFeatured img:hover {
    background-image:url('http://i47.tinypic.com/vz2oj.gif');
    }

它确实有效，但它显示在产品图像的后面而不是在它的顶部。我尝试了绝对定位和 z-index，但似乎没有任何效果。

http://www.pazzle.co.uk - 尝试在主页上的图像上应用。<<

编辑：

#featuredProducts.centerBoxWrapper {
   position: relative;
   }
#featuredProducts.centerBoxWrapper:hover:before {
    content: '';
    width: 187px;
    height: 179px;;
    position: absolute;
    top: 0;
    left: 0;
    background-image:url('http://i47.tinypic.com/vz2oj.gif');
}
4

2 回答 2

4 
a {
    display: block;   
    position: relative;
    width: 100px;
    height: 100px;
}
a:hover:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image:url('http://i47.tinypic.com/vz2oj.gif');
}​

演示

使用伪元素。

于 2012-10-24T01:03:09.733 回答
3

它正在做它应该做的事情。它是一个背景，所以它会出现在容器内容的后面。

您在这里要做的是在您悬停的图像上覆盖一个 div。我认为使用纯 CSS 解决方案是可能的，但使用一些 JavaScript 可能更容易。

看到这个问题：on hover overlay image in CSS

于 2012-10-24T01:02:43.323 回答