All geek questions in one place

Internet Explorer: Hover style stuck in jQuery sorted element

So I have a UL with jQuery-sortable LI below. Each LI has an associated Hover style. The problem occurs when I drag the LI from UL and release, 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 saw the following SO question: IE9 is not deleted: hover style when changing the DOM . It seems to have the same problem as mine, but I want to avoid using jQuery to force a style change if possible.

Does anyone know how to fix this using CSS?

+4
source share
2 answers

Use the helper parameter to clone an object while dragging; this causes IE8 to redraw the object after it is released, and therefore reset the freezing state.

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

Based on my research and the lack of CSS-based answers I found, this IE error seems to be insurmountable with pure CSS (if someone else found otherwise, please acknowledge that I am wrong!). The following is a jQuery-based workaround (in case you're interested):

 function toggleTabHover(tabName, hoverStatus) { var element = $('#'+tabName); if (element.hasClass('selectedTab')) { return; } if (hoverStatus === "on") { element.addClass('tabHoverOn'); element.removeClass('tabHoverOff'); } else { element.addClass('tabHoverOff'); element.removeClass('tabHoverOn'); } }

You pass the name of the tab to hang and the state of 'on' / 'off' to which you want to switch. The selected Tab class is for the tab that the button was clicked on (I don't want the hang to be applied to the active tab).

+1
source

Source: https://habr.com/ru/post/1443311/

More articles:


All Articles