Question

如果你看这个页面：

将鼠标悬停在左上角（大徽标右侧）的“产品”按钮上，然后向下移动显示的菜单。如果您离开“产品”按钮和下拉菜单，它将消失。这是预期的。

大徽标是透明的PNG。我在“产品”按钮和下拉菜单上有一个jQuery事件“mouseleave”，当鼠标不再显示时，菜单会消失。

如果鼠标越过徽标，当然，这意味着菜单关闭（因为它不是“mouseleave”容器的子容器）。我通过添加以下内容解决了这个问题：

if (!$('img#logo').is(':hover')){
    $(this).children('div#menu1bg').slideUp(200);
}

换句话说，如果触发“mouseleave”事件，请首先检查以确保鼠标不在徽标上（img #logo）。如果它在徽标上方，请不要关闭菜单。

这似乎很好用，除了它在Internet Explorer中根本不起作用。是否存在'：hover'和该浏览器的已知问题？或者是否有其他一些编码相同的方法可以在所有浏览器上更好地工作？

谢谢！

Answer 1

问题不在你的jQuery中，它在你的CSS中。 IE不支持CSS标签，但它应该在IE7中工作。无论如何，请尝试添加严格的!DOCTYPE：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

此DTD包含所有HTML元素和属性，但不包含表示或弃用的元素（如字体）。不允许使用框架集。

IE6-允许:hover在a元素上行事。将您的徽标包裹在a标记中，它可能会有效。

IE CSS support

如果你看一下这个，可以做的就不多了。

实际上，无论如何，请使用JQuery的.mouseLeave和.hover函数：

$('img#logo').mouseLeave(function()
{
    $(this).children('div#menu1bg').slideUp(200);
});