当您将鼠标悬停在产品图像上时,我想将此图像显示在我的产品图像之上。
这就是我正在使用的:
.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
使用伪元素。