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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18223663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 21:13:45  来源:igfitidea点击:

How to change the opacity of image on hover using css

jqueryimagecsshover

提问by user2481095

I'm trying to figure out how to set all images to be 50% opacity initially, and then change to 100% opacity on hover.

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

I tried setting this rule in the .cssfile but it gives a parse error:

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

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

回答by jterry

Your code is good- verified in this Fiddle with a friendly fish: http://jsfiddle.net/Qrufy/

您的代码很好-在此 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" />

The opacityproperty works in all modern browsers, and the filter:alphacovers <= IE8.

opacity属性适用于所有现代浏览器,并且filter:alpha封面 <= IE8。