CODEWITHSUNDEEP
jqueryhover
Gareth
Gareth

Reputation: 105

jQuery hover for single element that is repeated

I am trying to use jQuery to add a hover opacity on an element that is being repeated depending on how many items are in the database.

At the moment when hovering over one div, all of them are changing.

Here is the HTML/jQuery: http://jsfiddle.net/RKhvv/1/

Apologies that the jsfiddle doesn't display any result but hopefully it is the best way of showing you the code.

Thanks!

Upvotes: 0

Views: 247

Answers (3)

Ben Clayton
Ben Clayton

Reputation: 82219

Try this:

$(document).ready(function() {        
        $(".entryHeader").hover(function(){
           $(this).stop(true).fadeTo("fast", 0.6); // This sets the opacity to 100%     on hover
        },function(){
            $(this).stop(true).fadeTo("fast", 1.0); // This sets the opacity back to 60% on mouseout
        }); });

Upvotes: 0

Devin Burke
Devin Burke

Reputation: 13820

Change your JavaScript to the following. The $(this) makes the stop calls apply only to the element being hovered over and not all elements with the entryHeader class.

$(document).ready(function() {        
    $(".entryHeader").hover(function(){
    $(this).stop(true).fadeTo("fast", 0.6); // This sets the opacity to 100% on hover
    },function(){
        $(this).stop(true).fadeTo("fast", 1.0); // This sets the opacity back to 60% on mouseout
    });
});

jsFiddle with the new code.

Upvotes: 1

Mark W
Mark W

Reputation: 5964

You need to grab the current element that is being hovered on, not all with the same class.

I would loop around all the elements you have grabbed with the same class and then set each one individually

Upvotes: 0

Related Questions