Question

以下代码显示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的任何部分上，以获得对图像的更改不透明度效果。 NB效果只对图像而不是整个div。这可以用css完成吗？如果是这样的话？

Answer 1

改变这个：

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

到

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

当div处于img状态时，这将更改hover的不透明度。

Answer 2

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

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

我假设你知道jquery。您不能使用：根据Sitepoint将hover伪类替换为不具有href属性的元素。

CSS div和图像不透明效果

2 个答案: