Heim > Artikel > Web-Frontend > Wenn Mouseout und Mouseover untergeordnete Elemente im jQuery-Ereignis haben

Wenn Mouseout und Mouseover untergeordnete Elemente im jQuery-Ereignis haben

黄舟Original: 2017-06-28 14:15:281556Durchsuche

Jeder kennt die Mouseout- und Mouseover-Ereignisse, bei denen es sich um Mouse-Out- und Mouse-Over-Ereignisse handelt. Einige Leute wissen jedoch immer noch nicht, dass bei untergeordneten Elementen die Maus auch über die untergeordneten Elemente bewegt wird . Erneut ausgelöst. Sie können sich ein Beispiel ansehen:

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

Die ursprüngliche Absicht dieses Beispiels besteht darin, ein Listenfeld zu öffnen und eine Option auszuwählen. Das Listenfeld wird geschlossen, wenn die Maus wegbewegt wird. Tatsache ist jedoch, dass das Listenfeld geschlossen ist, solange die Maus darüber bewegt wird. Der Grund dafür ist, dass die Liste an ein Mouseout-Ereignis gebunden ist. Da die Liste viele Unterelemente enthält, wird vereinbart, dass das Mouse-Pass-Ereignis von ul und li ausgelöst wird. Das heißt, wenn sich die Maus aus ul herausbewegt und li, das Mouseout-Ereignis wird ebenfalls ausgelöst.

Es gibt viele Lösungen. Dieser Artikel verwendet die beiden Ereignisse, die jquery entsprechen: Mouseenter und Mouseleave.

Solange der Name des Mouseout-Ereignisses in Mouseleave geändert wird, sind Sie fertig. Hey, ganz einfach! An jquery wurde gedacht. ^_^,

Mouseleave: Im Gegensatz zum Mouseout-Ereignis wird das Mouseleave-Ereignis nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt. Wenn der Mauszeiger ein untergeordnetes Element verlässt, wird auch das Mouseout-Ereignis ausgelöst. Beispiel

MouseEnter: Im Gegensatz zum Mouseover-Ereignis wird das MouseEnter-Ereignis nur ausgelöst, wenn der Mauszeiger über das ausgewählte Element läuft. Wenn der Mauszeiger über ein untergeordnetes Element fährt, wird auch das Mouseover-Ereignis ausgelöst.

Das obige ist der detaillierte Inhalt vonWenn Mouseout und Mouseover untergeordnete Elemente im jQuery-Ereignis haben. 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：Lösung für das Problem des Wechsels zwischen zwei Elementen mit demselben Mouseover in jQueryNächster Artikel：Lösung für das Problem des Wechsels zwischen zwei Elementen mit demselben Mouseover in jQuery

In Verbindung stehende Artikel

Mehr sehen