Question

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 1

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'
});