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

回答

相关问题