jquery toggle on hover for multiple divs
- by Oterox
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
