jquery的切換爲多個div

我有一些div具有相同結構，我想，當鼠標懸停在div因此皮和b示出了切換：jquery的切換爲多個div

<ul class="tweets"> 
    <li> 
     <div class="a"> 
      <p>show a</p> 
     </div> 
     <div class="b"> 
      <p>show b</p> 
     </div> 
    </li> 
    <li> 
     <div class="a"> 
      <p>show a</p> 
     </div> 
     <div class="b"> 
      <p>show b</p> 
     </div> 
    </li> 
    <li> 
     <div class="a"> 
      <p>show a</p> 
     </div> 
     <div class="b"> 
      <p>show b</p> 
     </div> 
    </li> 
</ul>

這是我使用的jquery ：

$(document).ready(function(){ 

    var tweet = $("ul.tweets .a"); 

    tweet.hover(function(){ 
     $('.a').toggle(); 
     $('.b').toggle(); 
    }); 

});

但這切換所有的div，我只需要切換one.I應該使用$（本），但我不知道我能how.How使這項工作？

的小提琴是here

來源

2011-11-16 Oterox

你幾乎沒有。試試這個 - 將hover處理程序分配給li而不是其中的div，然後使用.find()找到div並切換每個處理程序。

$(document).ready(function(){ 

    var tweet = $("ul.tweets li"); 

    tweet.hover(function(){ 
     $(this).find('.a').toggle() 
      .end().find('.b').toggle(); 
    }); 

});

http://jsfiddle.net/mblase75/kpNY4/1/

來源

2011-11-16 17:52:27 Blazemonger

將有可能淡出的切換，這樣的過渡顯得更加柔和？ – Oterox

是的，請參閱http://api.jquery.com/fadeToggle/ - 但這會變得更加複雜，因爲您需要（a）在其他淡入之前完全淡出一個或（b）絕對地將一個淡出另一個是爲了在同一個地方交叉淡入淡出。如果您需要此方法的幫助，請提交一個新問題。 – Blazemonger

我已經創建了另一個問題[here]（http://stackoverflow.com/questions/8157155/how-to-fade-the-toggle-so-the-transition-looks-softer） – Oterox

應該這樣做：

$(document).ready(function(){ 

    var tweet = $("ul.tweets li"); 

    tweet.hover(function(){ 
     $(this).find(".a").toggle(); 
     $(this).find(".b").toggle(); 
    }); 

});

這裏是小提琴： http://jsfiddle.net/kpNY4/2/

來源

2011-11-16 17:51:11 GregM

jquery的切換爲多個div

回答

相關問題