Question

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

Answer 1

You’re almost there. Try this — assign the hover handler to the li instead of the div inside of it, then use .find() to locate the divs and toggle each one.

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