suchen

Heim >Web-Frontend >js-Tutorial >jquery: Beispielcode-Sharing für Mouseenter- und Mouseleave-Ereignisse

jquery: Beispielcode-Sharing für Mouseenter- und Mouseleave-Ereignisse

黄舟
黄舟Original
2017-06-28 10:17:231423Durchsuche

Aufgrund des DOM-Ereignisausbreitungsmechanismus von Javascript wird das Mouseover-Ereignis jedoch ausgelöst, unabhängig davon, ob sich der Mauszeiger über das ausgewählte Element oder seine Unterelemente bewegt, und das Mouseover-Ereignis wird ausgelöst unabhängig davon, ob der Mauszeiger das ausgewählte Element oder ein Unterelement verlässt.

Alle JQuerys stellen Mouseenter- und Mouseleave-Ereignisse bereit, um die Ereignisweitergabe zu beenden, sodass das Ereignis nur für das ausgewählte Element auftritt.

Das Mouseenter-Ereignis wird nur ausgelöst, wenn der Mauszeiger über das ausgewählte Element läuft.

Das Mouseleave-Ereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt.

Beispiel

<!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>

Kompatibel mit den Mouseenter- und Mouseleave-Ereignissen von IE6

Wenn sich die Maus unter IE6 über den angezeigten Inhalt bewegt, flackert er herum, also verwenden Sie hier jQuery Mouseenter und Mouseleave,
Nun, diese Syntax ist sehr seltsam, ich habe so etwas noch nie gesehen.
Nun, sammeln wir sie als Referenz. 

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

Das obige ist der detaillierte Inhalt vonjquery: Beispielcode-Sharing für Mouseenter- und Mouseleave-Ereignisse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Jquery verwendet die Ereignisse „Mouseenter“ und „Mouseleave“, um Beispielcode zu teilen, der es der Maus ermöglicht, durch die Popup-Ebene zu gehen und anklickbar zu seinNächster Artikel：Jquery verwendet die Ereignisse „Mouseenter“ und „Mouseleave“, um Beispielcode zu teilen, der es der Maus ermöglicht, durch die Popup-Ebene zu gehen und anklickbar zu sein

In Verbindung stehende Artikel

Mehr sehen