Brian Fitzpatrick Brian Fitzpatrick - 5 months ago 44
jQuery Question

Internet Explorer :Hover style getting stuck on jQuery sortable element

So I have a UL with jquery-sortable LI's below it. Each LI has a :Hover CSS style associated with it. The problem comes when I drag an LI away from the UL and let go, the Hover effect is still applied in IE9 (chrome works fine).

HTML

<ul id="test">
<li>test</li>
<li>test 2</li>
</ul>​


CSS

#test li:hover{
background-color:Yellow;}​


Javascript

$("#test").sortable();​


See Fiddle:
http://jsfiddle.net/hBhZD/2/

I have seen the following SO question:
IE9 not removing :hover style on DOM change .
Which seems to be the same issue I am experiencing, but I want to avoid using jQuery to force the style changes, if possible.

Anyone know how to fix this with CSS?

Answer

Use the helper option to clone the object while dragging; doing this forces IE8 to redraw the object once released and so reset the hover state.

$("#test").sortable({
    helper: 'clone'
});