JQuery .is(':hover') 在 IE9 中无法正常工作答案

【问题标题】：JQuery .is(':hover') not working correctly in IE9JQuery .is(':hover') 在 IE9 中无法正常工作
【发布时间】：2013-02-08 19:18:47
【问题描述】：

我在 IE9 中使用以下代码弹出 div 时遇到问题：

<li id="info001" class="listInfo" onmouseover="ShowPreview(this);" onmouseout="HidePreview();">

我的 HidePreview 检查以确保鼠标不在 listItem 或预览本身上，如下所示：

function HidePreview() {
    if (!($('#thePreview').is(':hover') || $('#info001').is(':hover'))) {
        $('#thePreview').hide();
    }
}

这在 Chrome 和 Firefox 中运行良好，但在 IE9 中，当我移过 listItem 和预览时，预览开始闪烁，然后当我单独移过预览时，它会被隐藏。

有什么办法可以避免吗？

编辑：为清楚起见，thePreview div 与 info001 li 重叠，足以在它们之间轻松移动鼠标。

编辑：http://jsfiddle.net/ControlFreak/QQsGS/

【问题讨论】：

我不认为:hover 是一个有效的jQuery 选择器。它没有出现在他们的docs
你真的应该为此使用 jQuery 事件处理程序而不是 html onmouse*="" 处理程序
@PatBurke 我不同意你的观点。我正在动态创建 ListItems，将处理程序放在那里更容易。但是，它应该以任何一种方式工作。
@OneTrickPony 它在 Chrome 和 FireFox 中运行良好，所以我猜它是有效的。我不记得我在哪里找到它了，但几乎可以肯定它是在这里的某个地方。
没错，如果你使用 .on() 你也可以实现动态事件处理程序。

标签： jquery internet-explorer-9 hover onmouseout

【解决方案1】：

尝试这样做：

var $thePreview = $("#thePreview");

$(".listInfo").hover(
    function () {
        $thePreview.show();
    },
    function () {
        $thePreview.hide();
    }
);

Working example on jsFiddle.

您仍然可以使用该代码，只需将伪事件从 hover 更改为 mouseenter mouseleave（如果您运行的是 1.9+）。有关更多信息，请参见：jquery.com/upgrade-guide/1.9/#hover-pseudo-event

【讨论】：

我想在我的示例中并不清楚，但是预览与 ListItem 重叠，如果光标在其中一个上，则预览会保持不变，类似于弹出菜单。预览确实有可点击的元素，所以这是必需的。
在原始消息中添加了 jsFiddle
我注意到您在 jsFiddle 中包含了 jQuery 1.7.2。这是您在网站上运行的完全相同版本的 jQuery 吗？
我在我的网站上使用 1.7.1，这是 Visual Studio 2012 附带的。
除了在 ul 之外使用该 div，您是否可以在每个 li 内部使用类名为“preview”的 span 标签？