以下代码显示了 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 中完成吗?如果是怎么办?
最佳答案
改变这个:
img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}
到
.item:hover img{
opacity:1.0;
filter:alpha(opacity=100);
}
当 div 处于 hover
状态时,这将改变 img
的不透明度。
关于html - CSS div 和图像不透明效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12774806/