悬停、鼠标悬停和鼠标移出 [英] Hover, mouseover and mouse out
问题描述
I'm learning and using jQuery and want to display a delete icon for some elements.
I have an outer main div, which contains number of wrappers for elements. Inside the element wrapper, I want to display a delete icon when the user hovers over the element wrapper, and remove it when user moves out of the element wrapper.
Using mouseover
and mouseout
, I can display and remove the icon, but as soon as I move my mouse over the delete icon it is removed because it fires the mouseout
event for the element wrapper. What am I doing wrong?
Two options for you:
- CSS's
:hover
pseudo-class (but only if you don't have to support IE6) mouseenter
andmouseleave
events
CSS's :hover
pseudo-class
You can make the browser do all the work if you don't need IE6 support, by using the :hover
pseudo-class:
/* 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 */
}
However, IE6 doesn't support the :hover
pseudo-class except on a
elements. IE7+ and all recent other browsers do.
mouseenter
and mouseleave
events
If CSS doesn't do it for you, you're looking for the mouseenter
and mouseleave
events, which are IE-specific but emulated by jQuery on all other browsers. jQuery even has a convenient function, hover
, for hooking up handlers to both events so you can readily accomplish what you're looking to do.
$(...your parent element...).hover(
function() {
// Called when the mouse enters the element
},
function() {
// Called when the mouse leaves the element
}
);
Here's a complete 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 using jQuery:
$('div').hover(
function() {
$(this).find('span.del').show();
},
function() {
$(this).find('span.del').hide();
}
);
The reason you had trouble with mouseover
and mouseout
is that they bubble, and so your mouseout
handler on your parent element was seeing the bubbled mouseout
from the underlying element when your mouse moved into the delete element. mouseenter
and mouseleave
don't bubble, and so they don't have that problem.
这篇关于悬停、鼠标悬停和鼠标移出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!