0

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>
Hussein
  • 42,480
  • 25
  • 113
  • 143

2 Answers2

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.

Jeff Lamb
  • 5,755
  • 4
  • 37
  • 54
-1

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.

Attila SATAN
  • 1