Home > Article > Web Front-end > jquery: Example code sharing for mouseenter and mouseleave events

jquery: Example code sharing for mouseenter and mouseleave events

黄舟Original: 2017-06-28 10:17:231410browse

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>

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

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Jquery uses mouseenter and mouseleave events to share the sample code where the mouse passes through the popup layer and can be clickedNext article：Jquery uses mouseenter and mouseleave events to share the sample code where the mouse passes through the popup layer and can be clicked

See more

jquery: Example code sharing for mouseenter and mouseleave events

Related articles