Lorsque mouseout et mouseover ont des éléments enfants dans l'événement jQuery-js tutoriel-php.cn

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

黄舟

Libérer： 2017-06-28 14:15:28

original

1578 Les gens l'ont consulté

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>

Copier après la connexion

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!