jquery : exemple de partage de code pour les événements mouseenter et mouseleave-js tutoriel-php.cn

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

黄舟

Libérer： 2017-06-28 10:17:23

original

1429 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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!