Internet Explorer：当目标 DOM 元素在 DOM 中移动时，悬停状态会变得粘滞

发布于 2024-12-12 00:30:32 字数 653 浏览 0 评论 0原文

我正在构建一个应用程序，允许您只需单击列表项即可将列表项从一个列表移动到另一个列表。然而，为了让用户知道 clik 的预期操作是什么，我在 CSS 中设置了一个 :hover 状态，它显示诸如“<< move”之类的指令。

但是我发现的问题是， Internet Explorer（测试版本 7-9），当我移动 DOM 元素时，即使鼠标四处移动，该元素的 :hover 状态仍然保持（变得粘滞）。仅当用户将鼠标悬停在新位置的项目上然后将鼠标移开时，:hover 状态才会消失。这似乎是 Internet Explorer 特有的问题。

如果您使用 IE，则可以通过访问 http://jsfiddle.net/hc2Eu/32/ 查看

问题当然，一种解决方法是不使用 CSS :hover 状态并使用 JQuery 悬停事件，但这肯定不是最好的方法，并且在 CSS 中控制元素 :hover 状态是迄今为止最强大的方法做事的方式这。解决方法可以在 http://jsfiddle.net/hc2Eu/29/

有谁知道我如何告诉互联网资源管理器不知何故发现某个元素不再位于鼠标下方，并且它应该释放 :hover 状态？

马特

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倦话 2024-12-19 00:30:33

这将解决你的问题。克隆单击的项目（如果要保存单击事件和其他处理程序，请添加 true）将其插入到其自身之后，以便它在 dom 中具有相同的位置。然后将其删除。克隆不会卡在悬停状态。所有引用都是相对的（this），因此它可以在任何地方工作而无需更改选择器。

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

this will handle your issue. clone the clicked item(add true if you want to save click event and other handlers) insert it after itself so it has the same place in the dom. then remove it. the clone will not be stuck with the hover state stuck. All references are relative (this) so it'll work anywhere without changing selectors.

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

回复收藏 0 原文