我正在学习和使用jQuery,并希望为某些元素显示一个删除图标.
我有一个外部主div,其中包含元素的包装数量.在元素包装器中,当用户将鼠标悬停在元素包装器上时,我想显示一个删除图标,并在用户从元素包装器移出时将其删除.
使用鼠标悬停和鼠标悬停,我可以显示和删除图标,但一旦我将鼠标移动到删除图标上,它将被删除,因为它触发元素包装器的mouSEOut事件.我究竟做错了什么？
解决方法
你的两个选择：
> CSS的：hover伪类(但是只有当你不必支持IE6)
> mouseenter和mouseleave事件
CSS的：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伪类,除了元素. IE7和所有最近的其他浏览器.
mouseenter和mouseleave事件
如果CSS没有为您做,那么您正在寻找的是鼠标和鼠标事件,这些事件是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>
JavaScript使用jQuery：
$('div').hover(
function() {
$(this).find('span.del').show();
},function() {
$(this).find('span.del').hide();
}
);
你的鼠标悬停和鼠标悬停问题的原因是它们会起泡,因此当您的鼠标移动到删除元素时,您的父元素上的mouSEOut处理程序会从底层元素看到冒泡的鼠标. mouseenter和mouseleave不要泡,所以他们没有这个问题.
