JQuery переключение при наведении на несколько делений

Question

У меня есть несколько div с идентичной структурой, и я хочу переключаться, когда мышь наводит курсор на div, поэтому a скрывает и 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();
    });

});

Но это переключает ВСЕ дивы, и мне нужно только переключить один. Я должен использовать $ (это), но я не знаю как. Как я могу сделать эту работу?

Скрипка здесь

Answer 1

Ты почти у цели.Попробуйте это - назначьте обработчик hover для li вместо div внутри него, затем используйте .find(), чтобы найти div s и переключать каждый из них.

$(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/

Answer 2

Должен сделать это:

$(document).ready(function(){

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

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

});

вот скрипка: http://jsfiddle.net/kpNY4/2/