Probleme mit jQuery mouseleave

Question

Ich versuche, ein Menü mit dieser Struktur zu erstellen:

<ul id="primary" class="menuOptions">
     <li>Item 1</li>
     <li>Item 2
         <div id="secondary">
            <ul class="menuOptions">
               <li>subItemOne</li>
               <li>subItemTwo</li>
           </ul>
         </div>
     </li>
     <li>Item 3</li>
</ul>

ich es mit diesem Skript bin Animieren:

$j('.menuOptions li').each(function(i){
//applies to all menu options
    $j(this)
   .bind('mouseover',function() {
          $j(this).toggleClass("over");
       })
       .bind('mouseleave',function() {
          $j(this).toggleClass("over");
       });                  
  });

Ich finde, dass die toggleClass Funktion auf dem primären Menüpunkt wie die Maus über die sekundären Menüpunkte aufgerufen wird. Ich weiß, dass mouseleave nicht aufgerufen werden soll, bis die Maus weg von den Kindern auch, also bin ich verwirrt.

Muss ich aktiv irgendwie Ereignispropagierung stoppen?

Danke!

Tim

Answer 1

Können Sie mit nur mit der Hover-Funktion versuchen.

$j('ul.menuOptions li').hover(function(){
          $j(this).toggleClass("over");
       } ,
       function() {
          $j(this).toggleClass("over");
       }
);

Answer 2

Ich vermute, dass das Problem war, dass du Kupplung Maus über mit Maus verlassen .

Siehe http://api.jquery.com/category/events/mouse -Veranstaltungen /

Im Allgemeinen sind die Kupplungen Sie sind:

• Maus eingeben mit Maus verlassen
• Maus über mit Maus aus .

andere Kombinationen verwenden zu unerwünschten Ergebnissen führen kann. Maus über und Maus aus sind ältere Ereignisse, die zwar immer noch gelegentlich nützlich, sind in der Regel schlechter als Maus eingeben und Maus verlassen .

Sie können auch einfach Dinge versuchen, mithilfe Hover , entspricht genau mit Maus eingeben und Maus verlassen .