IE8 + jQuery: Parent DIV fires HOVER event of first child

Question

JSFiddle link: http://jsfiddle.net/2JUEJ

What happens when I open the page in IE8 is that, whenever the mouse enters a container DIV (class=tableRow), the hover event of its first child DIV (class=tile/wideTile/longTile) fires. Works fine in Fx. I have tried using event.preventDefault(); in the parent's hover event, but that doesn't fix it. Any clues?

I haven't tested it, but if you replace `event.preventDefault()` with `event.stopPropagation()` that might work. `preventDefault()` will just stop the default behaviour of your element, which in your case, has none. — wakooka, Dec 27 '12 at 11:41

score 2 · Accepted Answer · edited May 23 '17 at 12:18

The combination of float:left and display:table-cell on the .tile class is incompatible. Setting float automatically sets the display to block. Take a look at the computed style in Chrome or Firebug/Firefox.

It might even be the case that floating the table-cell is actually causing the browser to generate anonymous table objects which is causing the rendering error in IE8. I guess Chrome/Firefox are interpreting the incompatibility differently.

Removing display:table-row causes IE to render the cells slightly better in that the first cell's hover event is no longer triggered when hovering over other row children. However this breaks the intended layout, therefore I recommend using a new approach.

First remove all the display:table-* rules since everything is floated (which as I already said sets display:block) and since everything is floated, each table will need a width, otherwise all the elements will sit horizontal to each other. For example I tried 420px on the .table class.

See demo.

Note: Personally I would go one better and remove the floats completely and just use a combination of display:inline-block;vertical-align:top and possibly some positioning, since floating generally requires extra rules and/or markup to clear (and I've never liked CSS float!)

Other questions that you might helpful explaining parts of this answer:

And your tip not only fixed the issue, but made it look fine in IE7 also. Thanks a lot. — Mr. X, Dec 28 '12 at 07:59

score 0 · Answer 2 · answered Dec 27 '12 at 11:38

0

Try using this way:

$(document).ready(function() {
    $(".title").hide();
    $(".tile, .wideTile, .longTile").hover(function() {
       $("div[class=title]", this).stop().slideDown("fast");
    }, function() {
       $("div[class=title]", this).stop().slideUp("fast");
    });
});

try using this script and see if this helps.

answered Dec 27 '12 at 11:38

Jai

74,255
12
74
103

Tried that, still the same. :( – Mr. X Dec 28 '12 at 07:53

score 0 · Answer 3 · answered Dec 27 '12 at 11:43

0

The event is propagated from child to parent. Try event.stopPropagation() in child div hadlers.

answered Dec 27 '12 at 11:43

lavrik

1,456
14
25

IE8 + jQuery: Parent DIV fires HOVER event of first child

3 Answers3