火狐悬停不透明度答案

【问题标题】：firefox hover opacity火狐悬停不透明度
【发布时间】：2011-06-08 21:21:33
【问题描述】：

我无法在 Firefox 或 IE 中更改悬停不透明度。它在铬中工作。 Firefox 和 IE 能够使用 .move 中定义的不透明初始状态，但不能在悬停时使用。有任何想法吗。

<style>
.move{
  width:100px;
  height:100px;
  background-color:red;
  opacity:0.2;
  filter:alpha(opacity=20);
  }
.move:hover{
  opacity:1;
  filter:alpha(opacity=100);
  }
</style>

<div class="move"></div>

【问题讨论】：

你的move div 真的是空的吗？
为我工作...jsfiddle.net/gWKEQ
任何人都可以确认它可以在本地使用 Firefox。它在 jsfiddle 上适用于我，但在使用 firefox 本地测试时无效。
我想我快弄明白了。它不适用于我在本地使用 Firefox。

标签： css opacity

【解决方案1】：

这是一个错误：http://support.mozilla.com/pa-IN/questions/746770

快速修复正在替换：

.move:hover{

与

[class="move"]:hover{

使用在http://www.xs4all.nl/~peterned/csshover.html 找到的脚本来解决 IE 怪癖。

最终代码是

<style>
 body {
  behavior:url('csshover3.htc');
 }

.move{
  width:100px;
  height:100px;
  background-color:red;
  opacity:0.2;
  filter:alpha(opacity=20);
  -moz-opacity:0.2;
  -khtml-opacity: 0.2;
  }
.move:hover{
  opacity:1;
  filter:alpha(opacity=100);
  -moz-opacity:1.0;
  -khtml-opacity: 1.0;
  }
[class="move"]:hover{
  opacity:1;
  filter:alpha(opacity=100);
  -moz-opacity:1.0;
  -khtml-opacity: 1.0;
  }
</style>

<div class="move"></div>

您需要添加 -moz-opacity 和 -khtml-opacity 以支持 webkit 和较旧的 firefox 安装。

【讨论】：

这在 FF 中有效，我认为这是一个错误，但在 IE 中仍然无效。

【解决方案2】：

不透明度规则都在ie中。 ie7 和 6 不支持它们。我看不出有任何理由说明它在 FF 上不起作用。

【讨论】：