Maison >interface Web >js tutoriel >Lorsque mouseout et mouseover ont des éléments enfants dans l'événement jQuery

Lorsque mouseout et mouseover ont des éléments enfants dans l'événement jQuery

黄舟original: 2017-06-28 14:15:281579parcourir

Tout le monde connaît les événements mouseout et mouseover, qui sont des événements mouse out et mouse over. Cependant, certaines personnes ne savent toujours pas que lorsqu'il y a des éléments enfants, les éléments enfants mouse out et mouse over se produiront également au niveau des éléments enfants. en même temps. Déclenché à nouveau. Vous pouvez regarder un exemple :

<html><head>  
  
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
  
<title>mouseout子元素的触发</title>  
  
<script type="text/javascript" src="jquery.min.js"></script>  

<style>
  #list{width:100px;padding:10px;border:1px solid #ccc;background:#FFF;}

  #list ul{margin:0;padding:0;background:#333;}

  #list ul li{list-style:none;margin-bottom:5px;}

  #list ul li a:hover{background:#666;color:#FFF;}

  </style>

</head>  
  
<body>  
  
<a href="#" id="showList">鼠标请过来</a>  
  
<div id="list" style="display:none;">  
  
    <ul>  
  
        <li><a href="#">选项一</a></li>  
  
        <li><a href="#">选项二</a></li>  
  
        <li><a href="#">选项三</a></li>  
  
        <li><a href="#">选项四</a></li>  
  
        <li><a href="#">选项五</a></li>  
  
    </ul>  
  
</div>  
  
</body>  
  
<script type="text/javascript">  
  
    $("#showList").bind("mouseover",function(){  
  
        $("#list").toggle(&#39;fast&#39;);  
  
    }); 
  
      
  
    $("#list").bind("mouseout",function(){  
  
        $(this).slideUp(&#39;fast&#39;);  
  
    });
  
</script>  
  
</html>

L'intention initiale de cet exemple est d'ouvrir une zone de liste et de sélectionner une option. La list box est fermée lorsque la souris s'éloigne, mais le fait est qu'elle est fermée tant que la souris reste dessus. La raison en est que la liste est liée à un événement mouseout. Comme la liste comporte de nombreux sous-éléments, il est convenu que l'événement mouse pass de ul et li sera déclenché lorsque la souris sortira de ul. et li, l'événement mouseout sera également déclenché.

Il existe de nombreuses solutions. Cet article utilise les deux événements correspondant à jquery, mouseenter et mouseleave

Tant que le nom de l'événement mouseout est modifié en mouseleave, vous avez terminé. Hé, facile ! jquery a été pensé. ^_^,

Mouseleave : Contrairement à l'événement mouseout, l'événement mouseleave ne sera déclenché que lorsque le pointeur de la souris quitte l'élément sélectionné. Si le pointeur de la souris quitte un élément enfant, l'événement mouseout sera également déclenché. Exemple

MouseEnter : Contrairement à l'événement mouseover, l'événement mouseenter ne sera déclenché que lorsque le pointeur de la souris traverse l'élément sélectionné. Si le pointeur de la souris passe par un élément enfant, l'événement mouseover sera également déclenché.

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：Solution au problème du déplacement entre deux éléments avec le même survol de la souris dans jQueryArticle suivant：Solution au problème du déplacement entre deux éléments avec le même survol de la souris dans jQuery

Articles Liés

Voir plus