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>
4
  • Is your move div really empty?
    – Pekka
    Jan 14, 2011 at 0:48
  • 2
    Works for me... jsfiddle.net/gWKEQ
    – BoltClock
    Jan 14, 2011 at 0:50
  • Can anyone confirm it works locally with firefox. It works for me on jsfiddle, but not when testing it locally with firefox.
    – Hussein
    Jan 14, 2011 at 1:21
  • I'm close to figuring it out, I think. It does not work with me locally with firefox.
    – Jeff Lamb
    Jan 14, 2011 at 1:23

2 Answers 2

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.

1
  • This works in FF, and i see it's a bug, But that still doesn't work in IE.
    – Hussein
    Jan 14, 2011 at 1:52
-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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.