Opacity

Question

I cannot get hover opacity for change in firefox or IE. he works in chrome. Firefox and IE can work with the initial state of opacity, as defined in .move, but just don't 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 mistake: http://support.mozilla.com/pa-IN/questions/746770

A quick fix replaces:

 .move:hover{ 

with

 [class="move"]:hover{ 

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

Final code

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

Answer 2

the opacity rule is anything. ie7 and 6 do not support them. I could not understand why it did not work for FF.