jquery: Example code sharing for mouseenter and mouseleave events-JS Tutorial-php.cn

jquery: Example code sharing for mouseenter and mouseleave events

黄舟

Release： 2017-06-28 10:17:23

Original

1426 people have browsed it

But due to the DOM event propagation mechanism of javascript, the mouseover event will be triggered whether the mouse pointer passes through the selected element or its sub-elements, and whether the mouse pointer leaves the selected element or any sub-element, it will be triggered. mouseout event.

All jquery provides mouseenter and mouseleave events to terminate event propagation so that the event only occurs on the selected element.

The mouseenter event will only be triggered when the mouse pointer passes through the selected element.

The mouseleave event will only be triggered when the mouse pointer leaves the selected element.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery中的mouseenter和mouseleave事件</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;padding: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; height:17px; 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> 
</head>
<body>
<div class="sns-func">
     <a href="lucky28/help1#" id="sel-down-w">设置</a>
      <div class="sns-setting-box" id="divSetting" style="display:none">
        <ul>
<li><a href="profile/baseinfo">个人资料</a></li>
<li><a href="privacy/basic">隐私设置</a></li>
<li><a href="privacy/dynamicFilter">动态过滤</a></li>
<li><a href="privacy/setEmail">邮件提醒</a></li>
<li><a href="profile/password">密码修改</a></li>
</ul>
      </div>
    </div>
   
</body>
</html>

Copy after login

Compatible with mouseenter and mouseleave events of IE6

Under IE6, when the mouse moves over the pointed content, it will flash around, so use mouseenter in jQuery And mouseleave,
Um, this syntax is very weird, I have never seen anything like this.
Well, collect them for reference.

$(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","");
});
});
});

Copy after login

The above is the detailed content of jquery: Example code sharing for mouseenter and mouseleave events. For more information, please follow other related articles on the PHP Chinese website!