CODEWITHSUNDEEP
javascriptcssinternet-explorer-8
Olegas
Olegas

Reputation: 10507

Hover style remains when DIV is moved from under the cursor in IE8

I've got live jsFiddle example

Move the mouse over one of the "stacked" elements - hovered item changes it's color to dark Click on an item - it is moving to the top of the stack.

In IE8 it is still "hovered" (dark background) but it is not under the mouse cursor now!

Upvotes: 2

Views: 730

Answers (3)

ershov.konst
ershov.konst

Reputation: 23

You can use a class instead of a pseudo-class and remove it after moving

$(".elem")
    .hover(function(e){
        $(this).toggleClass("elem-hover", e.type == "mouseenter");
    })
    .click(function(){
        $(".elem:first").before(this)                    
        $(this).removeClass("elem-hover")
    })

demo http://jsfiddle.net/ByEzV/4/

Upvotes: 1

Moin Zaman
Moin Zaman

Reputation: 25435

Try cloning the element instead of moving the original. With the original you're taking the element in it's current state in the DOM and placing it in its new position and it appears IE is not repainting the element when this happens, or resetting its state until you mouseover again.

By cloning it, you're forcing IE to create a new element and since it wasn't on the page, can't have the hover state applied to it. Then just prepend into the container, remove the original, and you're done.

$(".elem").on('click', function(){
    $(this).clone(true).prependTo('#container');
    $(this).remove();
});​

See: http://jsfiddle.net/y8PCc/1/

Credit to Dmitry from his answer here: Internet Explorer :hover state becomes sticky when the target DOM element is moved in the DOM

Upvotes: 3

Jim
Jim

Reputation: 743

If you change your jQuery to this it should work in ie8.

$(".elem").click(function(){
$(".elem:first").before(this);
$(this).css('background', '#fff').css('color', '#000');
})​

Upvotes: 0

Related Questions