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

时间:2013-08-14 05:12:10

标签: jquery css image css3 hover

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

我尝试在.css文件中设置此规则,但它提供了一个解析错误:

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

1 个答案:

答案 0 :(得分:19)

你的代码在这个小提琴中得到了很好的验证,有一条友好的鱼:http://jsfiddle.net/Qrufy/

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

img {
    opacity: 0.5;
    filter: alpha(opacity=40);
}

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

opacity属性适用于所有现代浏览器,filter:alpha涵盖&lt; = IE8。