Home/ Questions/Q 8621809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T06:54:05+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0