jQuery Hover-Ereignis mit verschachtelten Elementen

Question

ich zur Zeit Ihre grundlegenden haben, run-of-the-mill Menübaum wie folgt:

<ul id="nav"> 
    <li> 
    <a href="#">home</a> 
    <div class="controls">Some controls go here</div> 
    <ul> 
     <li> 
     <a href="#">item 1</a> 
     <div class="controls">Some controls go here</div> 
     </li> 
     <li> 
     <a href="#">item 2</a> 
     <div class="controls">Some controls go here</div> 
     </li> 
    </ul> 
    </li> 
</ul> 

Die divs mit der "Kontrollen" Klasse sind versteckt, mit zu beginnen. Was ich möchte, ist, dass, wenn Sie den Mauszeiger über eine Li halten, die Steuerelemente für diese jeweilige Li-Show angezeigt werden (wenn Sie Ihre Maus wegbewegen, verstecken sie sich wieder). Das Problem tritt auf, wenn Sie den Mauszeiger über einen der verschachtelten Li's bewegen. Hier ist die jQuery, die ich verwende:

$("#nav li").hover(
     function() { 
      $(".controls:first", this).css("display", "block"); 
     }, 
     function() { 
      $(".controls:first", this).css("display", "none"); 
     } 
    ); 

Vielen Dank für Ihre Hilfe. Remy

Answer 1

Sie können dies ohne js tun, obwohl Sie die js für ie6 benötigen würden.

so etwas wie dies funktionieren könnte:

$(this).children('div').css("display", "block"); 

oder sogar:

$(this).children('div').show(); 

hier 'this' die li ist.

Answer 2

Versuchen Sie, die Ereignisausbreitung in der Hover-Funktion zu stoppen, um zu verhindern, dass das Ereignis bis zum übergeordneten Element aufsteigt. Vielleicht möchten Sie auch das hoverIntent-Plugin betrachten, um Probleme mit "blinkenden" Hover-Effekten zu lösen, wenn Ihre "hovered" -Elemente nahe beieinander liegen.