Question

I can’t get hover opacity to change in firefox or IE. it’s 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>

Answer 1

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.