0

我有一个图像，我希望它在鼠标经过时更改为另一个图像。这对我来说似乎是正确的，但它总是看起来很大，在它的正常尺寸（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>
4

3 回答 3

1

您正在更改图像的背景。除非您将其不透明度更改为 0，否则您将看不到背景。

我建议删除图像并为您的班级提供 a-tag。另外将 image-src 指定为普通背景。

.class1{
display:block;
background-image:url(...);
...}
.class:hover{...}

和你的链接<a href="http://mylink" class="class1">&nbsp;</a>

于 2012-07-03T13:25:09.153 回答
1

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

所以你有几个选择：

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

img.class1:hover { opacity: 0 }

并在背景图片上使用 background-size ：

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

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

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

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

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

 $('img.class1').hover(function(){
    $(this).attr('src','image2.png');
 }
于 2012-07-03T13:35:21.383 回答
0

不要忘记添加下面的属性（到包含该background-image属性的类/标签/div）。否则，在某些情况下会重复：

{
  background-size: contain;
  background-repeat: no-repeat
}
于 2013-07-06T19:04:16.347 回答