Hover style does not apply when using IE filter and item cannot be clicked

Question

I am trying to create a clickable overlay to fit over arbitrary parts of the page. The overlay is basically translucent, but has a part that is completely opaque, so I can't just use the opacity property.

I managed to get it to work in all browsers except IE 7 and 8 (I don't care about IE 6).

My solution was to just make the background translucent using rgba, and the hover style changes that style. Of course rgba is not available in IE until 9, so I use a filter and -ms-filter with a gradient to achieve the same effect.

The problem is that the element does not seem to receive any hover event after applying the gradient filter, since the hover style is not used and the javascript event is not raised.

Any ideas on how to get a hang event when using gradient filters in IE?

Here is the style that applies to the overlay element:

#foo { cursor: pointer; position: absolute; top: 0; left: 0; height: 400px; width: 400px; background-color: rgba(230, 250, 250, .25); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#40B0FAFA', endColorstr='#40B0FAFA')"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#40B0FAFA', endColorstr='#40B0FAFA'); zoom: 1; } #foo:hover { background-color: rgba(230, 250, 250, 1); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFB0FAFA', endColorstr='#FFB0FAFA')"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFB0FAFA', endColorstr='#FFB0FAFA'); } 

Here is a simple example of a problem using jsFiddle.

Answer 1

You can create jQuery.

 $('#foo').hover(function() { $(this).css('backgroundColor', 'rgba(230, 250, 250, 1)'); //... });