Question

我有这个图像，当你对它们进行操作时，我希望在我的产品图像上显示这些图像。

这就是我正在使用的：

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

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

http://www.pazzle.co.uk - 尝试应用主页面上的图像。＆LT;＆LT;

编辑：

#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');
}

Answer 1

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

Demo

使用伪元素。

Answer 2

它正在做它应该做的事情。这是一个背景，因此它将出现在容器的内容后面。

这里你需要做的是在你正在悬停的图像上叠加一个div。我认为使用纯CSS解决方案是可行的，但使用一些JavaScript可能会更容易。

请参阅此问题：on hover overlay image in CSS

顶部的背景图片（使用CSS）

2 个答案: