CODEWITHSUNDEEP
jqueryhovereach
acrobat
acrobat

Reputation: 57

jquery on hover per each div

Fiddle: http://jsfiddle.net/3VB4b/ When I hover over the .loop, I want the span.soc in that div to fade. Right now, all of them are fading.

I've tried to use the .each() selector and no avail.

    <div class="loop">
    Content
    <span class="soc"> span</span>
</div>

<div class="loop">
    Content
    <span class="soc"> span</span>
</div>

<div class="loop">
    Content
    <span class="soc"> span</span>
</div>

Jquery

$(".loop").hover(function() {
  $('span.soc').fadeTo("slow",100);
});

Upvotes: 1

Views: 5927

Answers (3)

redmoon7777
redmoon7777

Reputation: 4526

here you go (I also added the reverting back to the original state) : http://jsfiddle.net/3VB4b/2/

the code:

$(".loop").hover(function() {
    $(this).find('span.soc').fadeTo("slow",100);
}, function(){
    $(this).find('span.soc').fadeTo("slow",0.4);
});

Upvotes: 2

JaredPar
JaredPar

Reputation: 754763

You need to limit the selector to the children of the element being hovered over. It's avaliable as this in the callback so try the following

$(".loop").hover(function() {
  $('span.soc', this).fadeTo("slow",100);
});

Upvotes: 3

Alex M
Alex M

Reputation: 3513

You need to add 'this' to the context of your search to only find the child elements.

$(".loop").hover(function() {
  $(this).find('span.soc').fadeTo("slow",100);
});

Upvotes: 6

Related Questions