jquery: mouseenter 및 mouseleave 이벤트에 대한 예제 코드 공유
- 黄舟원래의
- 2017-06-28 10:17:231412검색
그러나 javascript의 DOM 이벤트 전파 메커니즘으로 인해 마우스 오버 이벤트는 선택한 요소 또는 하위 요소를 통과하는 마우스 포인터와 관계없이 트리거되고, mouseout 이벤트는 마우스 포인터가 요소를 떠나는 것과 관계없이 트리거됩니다. 선택한 요소 또는 하위 요소.
모든 jquery는 선택한 요소에서만 이벤트가 발생하도록 이벤트 전파를 종료하기 위해 mouseenter 및 mouseleave 이벤트를 제공합니다.
mouseenter 이벤트는 마우스 포인터가 선택한 요소를 통과할 때만 트리거됩니다.
mouseleave 이벤트는 마우스 포인터가 선택한 요소를 떠날 때만 트리거됩니다.
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>IE6의 mouseenter, mouseleave 이벤트와 호환됩니다.
IE6에서는 마우스가 가리키는 내용 위로 마우스를 움직일 때 깜박이는 현상이 발생하는데, jQuery에서는 mouseenter와 mouseleave를 사용하는데,
음, 이 구문이 매우 이상합니다. , 이런 건 본 적이 없어요.
그럼 참고용으로 모아두자.
위 내용은 jquery: mouseenter 및 mouseleave 이벤트에 대한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.