I have some divs with identical structure and i want to toggle when the mouse hovers the div so a hides and b shows:

<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>

This is the jquery i'm using:

$(document).ready(function(){

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

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

});

But this toggles ALL the divs and i only need to toggle one.I should use $(this) but i don't know how.How could i make this work?

The fiddle is here