如何使用css更改悬停时图像的不透明度

Posted 2023-03-06

【中文标题】如何使用css更改悬停时图像的不透明度

【英文标题】：How to change the opacity of image on hover using css

【发布时间】：2013-08-15 22:18:09

【问题描述】：

我正在尝试弄清楚如何将所有图像设置为初始不透明度为 50%，然后更改为 悬停时为 100% 不透明度。

我尝试在.css 文件中设置此规则，但它给出了解析错误：

img 
  opacity:0.4;
  filter:alpha(opacity=40); 

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

【问题讨论】：

这个link 可能会有所帮助

是否还有更多我们没有看到的代码可以覆盖您的不透明度设置？

问题可能是您在<img> 标签上使用了:hover？在 <a> 标记以外的元素上使用悬停可能会导致某些版本的 ie 出现问题。

什么是解析错误？

嗯，很奇怪，现在可以正常使用了。我正在使用网络风暴。它只是发出警告

【参考方案1】：

您的代码在这条 Fiddle 中通过了一条友好的鱼的良好验证：http://jsfiddle.net/Qrufy/

    img 
        opacity: 0.5;
        filter: alpha(opacity=40);
    
    
    img:hover 
        opacity: 1.0;
        filter: alpha(opacity=100);
    

    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" />

opacity 属性适用于所有现代浏览器，filter:alpha 涵盖

【讨论】：

缩进正确？ OP的代码（至少他们发布的）是有效的，这就是重点:)