Hover not disappearing when using Sortable

Question

I have the following script, which works fine in Chrome but not in IE8:

jQuery:

$("<div class='divButtons'></div>").appendTo( $(".widget_header") );
$(".divButtons").text("321");

CSS:

.divButtons { background:orange; display:none; }
.widget:hover .divButtons { display:block; }

jsFiddle:

Here is a jsFiddle of the full thing.

What works:

What happens is, when I hover over a .widget, the css causes the .divButtons to display. All good so far. When I move a .widget to another .widget and let go, the .widgets change places, and the .widget which I am hovering over still displays the .divButtons, all is well. If I mouseout of a .widget and hover over another .widget, the .divButtons disappears from the .widgetwhich I was hovering over and appears on the .widget I am hovering over. All good so far.

The problem:

The problem in IE8, which doesn't happen in Chrome, is when I hover over a .widget, which causes the .divButtons to appear on the .widget I am hovering over. If I then move that .widget to a white part of the screen and then let go, I am no longer hovering over the .widget, but the .divButtons is still showing on the .widget I just let go of.

This should not be happening. This works fine in Chrome as I've mentioned before.

The question:

Any way to get this to work correctly in IE8 as it is currently working in Chrome?

Answer 1

It seems IE8 has a bug that mouseout or mouseleave are never fired on an element when the element is moved out from under the mouse scope. As a result :hover is never removed, and all the mouseout, hoverleave, etc event listeners in jquery will not be called.

What I've come up with is to check if any .column is being hovered when a .widget is realeased. If no columns are being hovered, we remove the hover state from the widget.

I've used a .hover class on .widget to maintain this as we can't remove :hover using jquery.

jsFiddle

Here is a jsFiddle of the working fix.

CSS

.widget.hover .divButtons { display:block; }​

jQuery

// We use this rather than :hover as :hover didn't always work in ie
$('.column').hover(function() {
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

// This is our base widget hover code
$('.widget').hover(function() {
    $('.widget.hover').removeClass('hover');
    $(this).addClass('hover');
}, function() {
    $(this).removeClass('hover');
});

jQuery sortable call

$( ".column" ).sortable({
    connectWith: ".column",
    tolerance: 'pointer',
    // We use stop to call this when the widget has been dropped
    stop: function(event, ui) {
        // We wait 1 millisecond until after the widget is dropped
        setTimeout(function() {
            // Check if any widget is hovered. Good browsers will have 0 here and skip the following. IE8 will have 1 here
            if ($('.widget.hover').size() > 0) {
                // We check if the widgets parent column does not has hover
                if (!$('.widget.hover').first().parent().is('.hover')) {
                    // If no column hover. We remove this hover class
                    $('.widget.hover').removeClass('hover');
                }
            }
        }, 1);
    }
});

I hope this works for you.

It's so annoying that in 2012 we still have to make such difficult work arounds because versions of IE have such bugs.

Answer 2

Instead over using hover pseudo class can you try this

CSS

.widget.hover  .divButtons { display:block; }​

JS

$('.widget').hover(function(e){
    $(e.currentTarget).addClass('hover');
},function(e){
    $(e.currentTarget).removeClass('hover');
});