recherche

Maison  >  Article  >  interface Web  >  jquery : exemple de partage de code pour les événements mouseenter et mouseleave

jquery : exemple de partage de code pour les événements mouseenter et mouseleave

黄舟
黄舟original
2017-06-28 10:17:231412parcourir

Cependant, en raison du mécanisme de propagation des événements DOM de javascript, l'événement mouseover sera déclenché quel que soit le passage du pointeur de la souris à travers l'élément sélectionné ou ses sous-éléments, et l'événement mouseover sera déclenché quel que soit le pointeur de la souris quittant l'élément sélectionné ou tout événement mouseout de sous-élément.

Tout jquery fournit des événements mouseenter et mouseleave pour terminer la propagation de l'événement afin que l'événement ne se produise que sur l'élément sélectionné.

L'événement mouseenter ne sera déclenché que lorsque le pointeur de la souris passera par l'élément sélectionné.

L'événement mouseleave ne sera déclenché que lorsque le pointeur de la souris quittera l'élément sélectionné.

Exemple

<!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 avec les événements mouseenter et mouseleave d'IE6

Sous IE6, lorsque la souris se déplace sur le contenu pointé, elle clignote, utilisez donc jQuery ici mouseenter et mouseleave,
Eh bien, cette syntaxe est très bizarre, je n'ai jamais rien vu de tel.
Eh bien, rassemblons-les pour référence. 

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Jquery utilise les événements mouseenter et mouseleave pour partager un exemple de code qui permet à la souris de passer à travers la couche contextuelle et d'être cliquableArticle suivant：Jquery utilise les événements mouseenter et mouseleave pour partager un exemple de code qui permet à la souris de passer à travers la couche contextuelle et d'être cliquable

Articles Liés

Voir plus