0

以下代码显示了 div 标签中的图像。

<div class='item'>
        <img class='img' src="image1.png" alt="" />
</div>

我正在使用以下 css 为 html 图像代码添加效果：

img{
width:50px;
height:50px;
opacity:0.4;
filter:alpha(opacity=40);

}

img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}

我正在使用它在 css 中产生不透明效果。使用此代码，当我将鼠标悬停在图像本身上时，不透明效果效果很好。但是，当我将鼠标悬停在 div 标签上时，我该如何做到这一点，以便对图像产生不透明效果。我希望能够将鼠标悬停在封装图像的项目 div 的任何部分上，以获得对图像的更改不透明度效果。注意仅对图像而不是整个 div 的影响。这可以在css中完成吗？如果有怎么办？

4

2 回答 2

5

改变这个：

img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}

至

.item:hover img{
opacity:1.0;
filter:alpha(opacity=100);
}

这将改变imgdiv 处于hover状态时的不透明度。

于 2012-10-08T03:06:34.450 回答
0

如果您为此使用jquery，那么我认为这很容易

 $('.item').hover(function(){ $('.img').css('opacity','1.0');}, function(){ $('.img').css('opacity','0.4');});

我假设你知道 jquery。根据 Sitepoint，您不能在没有 href 属性的元素上使用 CSS 的 :hover 伪类。

于 2012-10-08T03:18:09.233 回答