Question

我无法在Firefox或IE中改变悬停不透明度。它在chrome中工作。 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>

Answer 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安装。

Answer 2

不透明度规则在ie中都很糟糕。即7和6不支持它们。我看不出任何原因，它在FF上没有用。

firefox悬停不透明度

2 个答案: