However, because of the DOM event propagation mechanism of JavaScript, the MouseOver event is triggered regardless of whether the mouse pointer crosses the selected element or its child elements, triggering the Mouseout event regardless of whether the mouse pointer leaves the selected element or any child elements.
All jquery provides MouseEnter and MouseLeave events to terminate event propagation so that events occur only on selected elements.
The MouseEnter event is triggered only when the mouse pointer crosses the selected element.
The MouseLeave event is triggered only when the mouse pointer leaves the selected element.
Cases
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
MouseEnter and MouseLeave events in <title>jquery </title>
<style type= "Text/css" >
*{padding:0;margin:0; font-size:12px}
Ol,ul{list-style:none}
. sns-func{position:relative; margin:0 auto; width:200px; height:20px; line-height:20px; Background-color: #999}
. Sns-func Li.func-list{float:left; padding:0 8px;line-height:20px; font-family: "5b8b4f53"}
. sns-func li.sns-setting{border:1px solid #D1D6E2;p adding:0 7px; Border-bottom:none; Background-color: #FFFFFF; position:relative; Z-INDEX:100}
Sns-func. Sns-setting-box{position:absolute; top:20px; left:0px; width:66px; border:1px solid #CDCDCD; Background-color: #FFFFFF; z-index:99;}
. Sns-func. Sns-setting-box li.on a{background-color: #CFDDE3;}
. sns-func. Sns-setting-box a:link,.sns-func. Sns-setting-box a:visited{display:block; color: #555555; Text-decoration:none; padding:5px 0 0 7px; Line-height:1}
. Sns-func. Sns-setting-box a:hover{background-color: #CFDDE3; color: #555555; text-decoration:none;}
</style>
<script type= "Text/javascript" src= "H/jquery-1.4.2.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#sel-down-w"). MouseMove (function () {
$ (". Sns-setting-box"). Slidedown (). MouseLeave (function () {
$ (this). Slideup ()
})
})
});
</script>
<body>
<div class= "Sns-func" >
<a href= "lucky28/help1#" id= "sel-down-w" > Settings </a>
<div class= "Sns-setting-box" id= "divsetting" style= "Display:none" >
<ul>
<li><a href= "Profile/baseinfo" > Profile </a></li>
<li><a href= "Privacy/basic" > Privacy settings </a></li>
<li><a href= "Privacy/dynamicfilter" > Dynamic filtration </a></li>
<li><a href= "Privacy/setemail" > Email Reminders </a></li>
<li><a href= "Profile/password" > Password modification </a></li>
</ul>
</div>
</div>
</body>
|
Compatible IE6 MouseEnter and MouseLeave events
Under the IE6, the mouse pointer over the content, will flash to flash, so in jquery MouseEnter and MouseLeave,
Well, it's a weird grammar, I've never seen anything like it.
Well, gather it up as a reference.
| The code is as follows |
Copy Code |
$ (document). Ready (function () {
$ (". Search-photo-img"). MouseEnter (function () {
$ (this). CSS ("Background", "url (module/search/templates/default/images/photo-img-onbg.gif)"). MouseLeave (function (){
$ (this). CSS ("Background", "");
});
});
}); |
