Hover doesn't go away when you mouse out in <= IE 8

Question

I have encountered an interesting issue I could not find posted elsewhere.

Take a look at this JSFiddle. I have a div that has 2 things occur when you hover over it: (1) It gains some CSS formatting via the :hover pseudo class, and (2) an overlay with some information about the image pops up on the bottom of the image (via jQuery).

This works just fine in all the modern browsers, but open it up in IE 7 or 8. Mouseover the frame. If you mouseout over the top of the frame, there are no problems -- the overlay disappears and the CSS formatting gets removed. But if your mouse passes directly over the overlay while you're mousing out, the :hover formatting stays. jQuery knows that you moused out because the overlay gets removed, but IE doesn't because the CSS :hover formatting remains. Any thoughts?

Answer 1

CSS :hover support for all elements except link <a>..</a> is incomplete/not supported for IE < 8.

http://www.quirksmode.org/css/contents.html#t16

IE 5/6 supports both only on links. IE 7 supports :hover, but not :active, on all elements.

IE 8-10 (and maybe older ones, too) have a slight bug: clicking the mouse down on a nested element does not trigger :active. Try it in the test page by depressing the mouse button on one of the code examples. The :active styles do not kick in.

Answer 2

Seeing as you are already using jQuery for hover, I recommend changing your script to:

$(document).ready(function() {
    $('#frame').hover(
        function() {
            $('#frame').addClass('hover').append('<div id="overlay">blah blah</div>');
        }, 
        function() {
             $('#frame').removeClass('hover')
            $('#overlay').remove();
        }
    );
});

And then change your CSS from :hover to .hover on all relevant elements. As per this fiddle:

http://jsfiddle.net/BZj2v/