Jquery懸停與列表項目

Question

在我的html代碼中有列表項。在懸停相關列表項時，我想顯示並隱藏相關的fav div。但我不能把喜歡div和它的列表項。

HTML：

<ul>  
<php? for(....): ?>        
    <li> 
     <div id="sin"> 
      some stuff 
     </div> 
     <div id="son"> 
      some stuff 
     </div> 
     <div id="fav"> 
      something 
     </div> 
     <br /> 
    </li> 
<php? endfor; ?> 
</ul> 

當鼠標移到標籤<li> 「最愛」 的div屬於鼠標痊癒了列表項有出現。

我的工作錐入jQuery代碼：

$(document).ready(function() 
{   
    $("li").hover(function(){ 
     $("#fav").show()}, 
     function() { 
     $("#fav").hide() 
    }); 
}); 

Answer 1

的問題是，您使用的是同一個ID多次。您需要使用class="fav"代替id="fav"

//爲#sin和#son也

$(document).ready(function() 
{   
    $("li").hover(function(){ 
     $("#fav").show()}, 
     function() { 
     $("#fav").hide() 
    }); 
}); 

應該

$(document).ready(function() 
{   
    $("li").hover(function(){ 
     $(this).find(".fav").show()}, 
     function() { 
     $(this).find(".fav").hide() 
    }); 
}); 

Answer 2

在這裏你有

$(document).ready(function() 
{ 
    $('.fav').hide(); 
    $("li").hover(function(){ 
     $(".fav",$(this)).show()}, 
     function() { 
     $(".fav",$(this)).hide() 
    }); 
}); 

你需要使用上下文$(".fav",$(this)).而不是$(".fav").。 你也已經從id改變class像

      <li> 
           <div class="sin"> 
            some stuff 
           </div> 

           <div class="son"> 
            some stuff 
           </div> 

           <div class="fav"> 
            something 
           </div> 
           <br /> 
          </li>