css - firefox 悬停不透明度

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