Hover does not disappear when you exit in <= IE 8

Question

I ran into an interesting problem that I could not find elsewhere.

Take a look at this JSFiddle . I have a div that has two things when you hover over it: (1) It gets some CSS formatting using the hover pseudo-class: and (2) an overlay with some image information appears at the bottom of the image ( through jQuery).

This works well in all modern browsers, but open it in IE 7 or 8. Move your mouse over the frame. If you click on the top of the frame, there is no problem - the overlay disappears and CSS formatting is removed. But if your mouse goes directly over the overlay while you exit, formatting: hover remains. jQuery knows you are gouging because the overlay is removed, but IE is not because the CSS: hover formatting remains. Any thoughts?

Answer 1

Seeing that you are already using jQuery to hang, 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 to all the relevant elements. According to this fiddle:

http://jsfiddle.net/BZj2v/

Answer 2

CSS support :hover 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 only supports links. IE 7 supports: guidance, but not: active, on all elements.

IE 8-10 (and possibly older ones) also have a small error: clicking on a nested element does not cause: active. Try on the test page by clicking on one of the sample code. Active styles do not work.

Answer 3

This is a well-known event in jQuery, as a result of the fact that the mouse disable function in Internet Explorer is a property. You will need to use the jewery mouseleave / mouseenter methods.

Here is your updated fiddle fiddle using the mouseenter() and mouseleave() methods. It works and has been tested in IE7-9.

For convenience, I have also included the code here:

JS:

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

CSS

 #frame { padding:5px; border:1px solid black; width:150px; text-align:center; position:relative; } #frame.hover { border:1px solid red; } #frame img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25; } #frame.hover img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #overlay { background-color:black; color:white; height:25px; width:100%; font-size:10px; position:absolute; bottom:0; left:0; } 

EDIT: I updated my fiddle and code above based on the results that you described in your comment. It should work completely - let me know if it is not.

A bit more detailed:

This solution uses the jQuery mouseenter and mouseleave because of the many problems that IE has with the hover method. Since you may or may not know, hover is a shortened version of mouseenter / mouseleave , but there are dozens of problems with the hover method that are completely related to IE6-9 (and possibly IE 10, although I have not tested this). For some specific questions, search for “Stack Overflow” or Google for “jQuery hover IE issues” and look at some of the results that appear. For this reason, I always take an extra ten seconds to type mouseenter / mouseleave and not use hover , especially when I already have problems with my code in IE.

Let me know if you have any questions / difficulties. Good luck! :)