Internet Explorer: состояние зависания становится неактивным, когда целевой элемент DOM перемещается в DOM

Question

Я создаю приложение, которое позволяет вам перемещать элементы списка из одного списка в другой, просто нажимая на них. Однако для того, чтобы пользователь знал, что такое целевое действие для клика, я установил в CSS состояние: hover, которое показывает такую ​​инструкцию, как «<< move» </p>

Однако проблема, с которой я столкнулся, заключается в том, что в Internet Explorer (тестированные версии 7-9), когда я перемещаю элемент DOM, состояние: hover этого элемента остается (становится липким), даже когда мышь перемещается. Состояние: hover исчезает только тогда, когда пользователь наводит курсор на элемент в новом месте, а затем убирает свою мышь. Кажется, это проблема только Internet Explorer.

Вы можете увидеть проблему, если используете IE, перейдя на http://jsfiddle.net/hc2Eu/32/

Конечно, существует обходной путь, который заключается в том, чтобы не использовать состояние CSS: hover и использовать вместо него событие JQuery hover, но это, безусловно, не лучший способ сделать что-либо, и сохранение элементов: состояние hover, контролируемое в CSS, безусловно и прочь самый надежный способ сделать это. Обходной путь можно увидеть на http://jsfiddle.net/hc2Eu/29/

Кто-нибудь понял, как я могу как-то сказать Internet Explorer, что элемент больше не находится под мышью, и он должен освобождать состояние: hover?

Мэтт

Answer 1

Попробуйте клонировать элемент, а не добавлять его напрямую. Когда вы добавляете, вы берете элемент из его текущей позиции и состояния в DOM и помещаете его в новую позицию - в основном просто перемещая его. IE явно не перерисовывает элемент, когда это происходит, или сбрасывает его состояние до тех пор, пока вы не наведете курсор мыши.

Клонируя его, вы заставляете IE создавать новый элемент, который, так как он не находится на странице, в любом случае не может применить к нему состояние наведения. Затем просто добавьте его в новый контейнер, удалите оригинал, и все готово.

См. Пример в этой скрипке: две строки кода, кросс-браузер, и вы останетесь лаконичны и не будете загрязнять свой код. :)

http://jsfiddle.net/hc2Eu/36/

Answer 2

это решит вашу проблему.клонируйте выбранный элемент (добавьте true, если вы хотите сохранить событие click и другие обработчики), вставьте его после себя, чтобы он занимал то же место в dom.затем удали это.клон не застрянет с зависшим состоянием наведения.Все ссылки являются относительными (это), поэтому он будет работать где угодно без изменения селекторов.

        $("#elementwithhover").click(function() { 
            // code that makes element or parent slide or 
            // otherwise move out from under mouse. 
            $(this).clone(true).insertAfter($(this));
            $(this).remove();
        });