jquery切换悬停多个div

时间:2011-11-16 17:49:09

标签: jquery hover toggle

我有一些结构相同的div,我想在鼠标悬停div时切换,所以隐藏和b显示:

<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,我只需要切换一个。我应该使用$(this)但我不知道怎么做。我怎么能让这个工作?

小提琴是here

2 个答案:

答案 0 :(得分:4)

你快到了。试试这个 - 将hover处理程序分配给li而不是div内部,然后使用.find()找到div并切换每个$(document).ready(function(){ var tweet = $("ul.tweets li"); tweet.hover(function(){ $(this).find('.a').toggle() .end().find('.b').toggle(); }); }); 之一。

{{1}}

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

答案 1 :(得分:0)

应该这样做:

$(document).ready(function(){

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

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

});

这里是小提琴: http://jsfiddle.net/kpNY4/2/