我正在学习和使用 jQuery，并希望为某些元素显示一个删除图标。
我有一个外部主 div，其中包含元素的包装器数量。在元素包装器内部，我想在用户将鼠标悬停在元素包装器上时显示一个删除图标，并在用户移出元素包装器时将其删除。
使用mouseover 和mouseout，我可以显示和删除图标，但是只要我将鼠标移到删除图标上，它就会被删除，因为它会触发元素包装器的mouseout 事件。我做错了什么？
【问题讨论】：
两种选择：
:hover 伪类（但前提是您不必支持 IE6）mouseenter 和 mouseleave 事件:hover 伪类如果您不需要 IE6 支持，您可以使用 :hover 伪类让浏览器完成所有工作：
/* Don't show `child` elements inside `parent` elements...*/
parent child {
display: none;
}
/* ...unless the `parent` element is being hovered over */
parent:hover child {
display: block; /* or inline-block or whatever */
}
但是，IE6 不支持 :hover 伪类，a 元素除外。 IE7+ 和所有最近的其他浏览器都可以。
mouseenter 和 mouseleave 事件如果 CSS 不适合您，您正在寻找 mouseenter 和 mouseleave 事件，它们是 IE 特定的，但在所有其他浏览器上由 jQuery 模拟。 jQuery 甚至还有一个方便的函数hover，用于将处理程序连接到这两个事件，这样您就可以轻松完成您想要做的事情。
$(...your parent element...).hover(
function() {
// Called when the mouse enters the element
},
function() {
// Called when the mouse leaves the element
}
);
这是一个完整的live example：
HTML：
<div>Hover over me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>
<div>And me <span class='del'>[X]</span></div>
使用 jQuery 的 JavaScript：
$('div').hover(
function() {
$(this).find('span.del').show();
},
function() {
$(this).find('span.del').hide();
}
);
mouseover 和 mouseout 遇到问题的原因是它们冒泡，因此父元素上的 mouseout 处理程序从底层元素中看到冒泡的 mouseout当您的鼠标移动到删除元素时。 mouseenter 和 mouseleave 不会冒泡，所以他们没有这个问题。
【讨论】：
mouseover 和mouseout 而不是mouseenter 和mouseleave。同样，它们是不同的事件，它们的行为也不同（请参阅上面答案末尾的注释）。但如果你真的使用mouseenter 和mouseleave，听起来你并没有删除mouseleave 上的元素。如果你这样做，效果很好：jsbin.com/umalu4/2 但是添加到 DOM 和从 DOM 中删除是比显示/隐藏更重的操作，建议显示/隐藏。
您是否尝试过改用 mouseenter 和 mouseleave 事件？
【讨论】：
您可以在 jQuery 事件 onmouseover 和 onmouseout 上应用样式。当用户将鼠标悬停在菜单上时，此事件将触发，您可以在那里设置效果。
<style type="text/css">
.menu {
background-color: #CDDC39;
list-style: none;
margin: 100px;
padding: 0;
width: 10em;
}
.menu li {
margin: 0;
padding: 5px;
}
.menu a {
color: #333;
}
</style>
<ul class="menu">
<li onmouseover="this.style.backgroundColor='#F44336';" onmouseout="this.style.backgroundColor='transparent';" style="background-color: transparent;">
<a href="http://www.infinetsoft.com/">learn dot net skills</a>
</li>
<li onmouseover="this.style.backgroundColor='#F44336';" onmouseout="this.style.backgroundColor='transparent';" style="background-color: transparent;">
<a href="http://www.infinetsoft.com/htmltry">Work out html</a>
</li>
<li onmouseover="this.style.backgroundColor='#F44336';" onmouseout="this.style.backgroundColor='transparent';" style="background-color: transparent;">
<a href="http://www.infinetsoft.com/Category/JQuery/9/1">jQuery tutorials</a>
</li>
</ul>
【讨论】：