jQuery Fade out Transparency In IE

Question

I'm working on a site and I have run into a few problems. Here is the site

1. I have two divs. .slide and .cover.

.cover fades in and out when hovered over displaying some text and a transparent background. This is done with jQuery and the transparency is with CSS.

This works fine on load in all browsers but when I hover over a slide and it fades back in, the background transparency of .cover doesn't work in IE (6 7 and 8). I've tried css with .cover:hover and that doesn't work as an IE hack.

.cover {

    width:750px;
    height:500px;
    background:#000;
    margin:0 auto;
    opacity:0.7;
    filter:alpha(opacity=70);
    }
.cover:hover {  opacity:0.7;
    filter:alpha(opacity=70);}

Answer 1

If you are already using jQuery you could try something like this:

$(document).ready(function() {
    $('.slide').hover(
        function() {  $(".cover").animate({ opacity: 0.7 }, 500 ); },
        function() {  $(".cover").animate({ opacity: 0 }, 500 ); }
    );
});

and remove this from your CSS:

.cover:hover {  opacity:0.7;
    filter:alpha(opacity=70);}