'onmouseover'在Javascript中意外地工作

Question

我有一个div ，其中有一个链接。 当用户将鼠标指针放在链接上时，我调用basic_nav_mouseover（）函数，该函数更改父div的背景图像 。 我还将函数basic_nav_mouseout添加到父元素的ommouseout属性中，当鼠标指针离开div时，它应该将父div的background-image设置为none 。 然而，奇怪的是，只要鼠标指针离开父div中的链接，就会调用函数basic_nav_mouseout（）。 这是一个测试页面： http ： //spats.in/test/ 。 查看右上角的“关于”，“人物”，“连接”的链接。

我哪里错了？

Answer 1

对jQuery文档中鼠标悬停和mouseout事件的限制有一个非常好的解释（大约在该页面的一半）。

Mouseover和mouseout事件会在您按预期将鼠标移动到绑定元素上时触发，但是当您将鼠标悬停在父元素中的任何内部元素上时，它们也会触发单独的事件 - 这在大多数情况下显然是不合需要的。

基本上，要解决您的问题，请使用mouseenter和mouseleave事件。

从用户体验的角度来看，我鼓励你将两个事件绑定到链接，这样特殊的背景颜色实际上表明链接是活跃的 - 我想我会发现你试图达到的效果相当误导，因为突出显示的背景会让我觉得我仍然可以点击链接，即使我不能..

如果你想保持你当前获得的视觉效果（每个链接后面都有一个高色区域），让链接占据整个盒子 - 即div的高度和宽度的100％。

Answer 2

如果在链接上设置了onmouseover，则应在同一元素上设置onmouseout。

Answer 3

每次子节点悬停时都会触发onmouseout ，您需要检查调用目标。

http://www.quirksmode.org/js/events_mouse.html是一个很好的资源。

Answer 4

我不是javascript专家，但你不应该等到将函数绑定到事件，直到页面完全加载？ 所以：

window.onload = function(){
    $('.item1').bind('mouseleave',basic_nav_mouseout);
};

另外（如果我错了，请纠正我）我不认为你必须在'basic_nav_mouseout（'。item1'，'red'）'中将对象作为参数给出，你可以使用'this'关键字。 所以：

function basic_nav_mouseout(){
    this.css('background-image',"none");
}

我对JQuery库一无所知，我唯一的（小）经验是使用Prototype库。