Give multiple divs the same function

Question

I want to create multiple thumbnails with the same .class. The thumbnail div contains 3 other divs. The first on is an image, the second one is a description which appear on mouseenter and the third one is a bar which change the opacity.

When the mouse hovers above the .thumbnail both elements should execute their function.

My Problem is that now every thumbnail executes the function, so every thumbnail is now highlighted. How can I change this so only one Thumbnail highlights while hovering above it?

HTML:

<div class="thumbnail">    
    <div class="thumbnail_image">
        <img src="img/Picture.png">
    </div>

    <div class="thumbnail_describe">
        <p>Description</p>
    </div>

    <div class="thumbnail_footer">
        <p>Text</p>
    </div>
</div>

jQuery:

$(document) .ready(function() {

var $thumb = $('.thumbnail')
var $thumb_des = $('.thumbnail_describe')
var $thumb_ft = $('.thumbnail_footer')

//mouseover thumbnail_describe
$thumb.mouseenter(function() {
    $thumb_des.fadeTo(300, 0.8);
});

$thumb.mouseleave(function() {
    $thumb_des.fadeTo(300, 0);
});


//mouseover thumbnail_footer
$thumb.mouseenter(function() {
    $thumb_ft.fadeTo(300, 1); 
});

$thumb.mouseleave(function() {
    $thumb_ft.fadeTo(300, 0.8);
});

});

Answer 1

You code behave like this because you apply the fadeTo function to the $thumb_des and $thumb_ft selectors which contain respectively all the descriptions and footers of the page.

Instead, you should select the description and footer of the thumbnail triggering the mouse event, inside the mousenter or mouseleave functions.

Another thing you could change to optimize your code is to use only once the event listening functions, and perform both actions on the description and on the footer at the same time:

$thumb.mouseenter(function() {
    var $this = $(this)
    $this.find('.thumbnail_describe').fadeTo(300, 0.8);
    $this.find('.thumbnail_footer').fadeTo(300, 1); 
});

full working jsfiddle: http://jsfiddle.net/Yaz8H/

Answer 2

When you do:

$thumb_des.fadeTo(300, 0.8);

it fades all nodes in $thumb_des. What you want is to fade only the one that corresponds to the correct node in $thumb.

Try this:

for (i = 0; i < $thumb.length; i++)
{
    $thumb[i].mouseenter(function (des) {
        return function() {
            des.fadeTo(300, 0.8);
        };
        }($thumb_des[i]));
    });
}

Answer 3

You'll want to access the child objects of that particular thumbnail, something like this would work:

$(this).children('.thumbnail_describe').fadeTo(300, 0.8);

Here is a fiddle example.