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

Question

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

19

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

我尝试在.css文件中设置此规则，但它会产生解析错误：

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

- user2481095

1

这个链接可能会有所帮助。 - gersande

有没有其他代码覆盖了你的不透明度设置，我们没有看到？ - jterry

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

什么是解析错误？ - gilly3

嗯，奇怪了，现在它正常工作了。我使用的是WebStorm。它只是给出了一个警告。 - user2481095

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jterry · Accepted Answer

您的代码很好 - 在这个友好的鱼的 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则覆盖了<= IE8。