当您将鼠标悬停在产品图像上时,我想将此图像显示在我的产品图像之上。



这就是我正在使用的:

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

最佳答案

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

使用伪元素。

10-07 19:12
查看更多