html - 在类 :hover 中使用纯 css 调整背景图像的大小

Question

我有一张图片，我希望它在鼠标经过时更改为另一张图片。这对我来说似乎是正确的，但它总是显得很大，正常大小(128px x 128px)，并且在另一张图片的后面。 (另一个在 z-index:1 的 div 中)，鼠标悬停 img 的 z-index:999

这是我的CSS

.class1{
    max-width:64px;
    max-height:64px;
}
.class1:hover{
    background-image:url(http://img195.imageshack.us/MOUSEOVER_IMAGE.png);
    width:64px;
    height:64px;
    z-index:999;
    background-position:top center;

这是我的头像

<a href="http://mylink"><img class=class1 src="http://imageshack.us/NORMAL_IMAGE.png" alt="some text here" /></a>

Answer 1

这里有几个问题。就像提到的 Tobas 一样，您在链接上使用了背景图像，但您仍然有一个图像子元素。 z-index 不会将父元素的背景置于子元素之上。

所以你有几个选择:

1:悬停时将 img 不透明度更改为 0:

img.class1:hover { opacity: 0 }

并在背景图像上使用背景大小:

a:hover {
  background: url(...);
  background-size: 64px 64px;
 }

2:完全删除子图像，并将图像换出作为链接的背景。如果图像没有语义值(value)，这是有道理的。

a { background: url(image1.png); }

 a:hover { background: url(image2.png); }

3:用 javascript/jquery 交换图像本身:

 $('img.class1').hover(function(){
    $(this).attr('src','image2.png');
 }