firefox hover opacity

I can't get hover opacity to change in firefox or IE. it's 开发者_JAVA技巧working in chrome. Firefox and IE is able to work with opacity initial state as defined in .move, but just not on hover. Any ideas.

<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>

This is a bug: http://support.mozilla.com/pa-IN/questions/746770

The quick fix is replacing:

.move:hover{

with

[class="move"]:hover{

Use the script found at http://www.xs4all.nl/~peterned/csshover.html to address IE quirks.

Final code is

<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>

You need to add -moz-opacity and -khtml-opacity to support webkit and older firefox installations.

opacity rule is all wacked in ie. ie7 and 6 doesnt support them. i couldnt see any reason that y it didnt work on FF.