CODEWITHSUNDEEP
javascriptjqueryhtmlhover
user1617218
user1617218

Reputation:

Item hover shows hidden text of all items

I'm using this script to animate/show the hidden text of the item:

/* Artworks Hide/show text */
$(".item").hover(function() {
    //fadein second image using jQuery fadeIn 
$(".item .art_title").fadeIn(200);
    }, function () {
//fadein first image using jQuery fadeIn
    $(".item .art_title").fadeOut(200);
});

And this is the HTML:

            <div class="item">
                <img src="img/artwork1.jpg" alt="artwork1" width="240" height="173">
                <div class="art_title">
                    <p>SWEET LIFE</p>
                </div>
                <div class="mask"></div>
            </div>

The problem is that when I hover over one item, it displays the hidden text of all itmes! How can I fix to display just the text of the item i'm hover?

Upvotes: 2

Views: 330

Answers (3)

MrUpsidown
MrUpsidown

Reputation: 22493

This happens because you are using classes for selectors in your jQuery code. You could also try:

$('.item').mouseenter(function() {

    $(this).find('.art_title').fadeIn(200); 

}).mouseleave(function() {

    $('.art_title').fadeOut(200);
});

Upvotes: 0

user1726343
user1726343

Reputation:

Try changing it to $(this).find(".art_title").fadeIn(200); and correspondingly, $(this).find(".art_title").fadeOut(200);

You are currently selecting all elements with class art-title. You want all elements within the hovered one that have class art-title.

Upvotes: 2

pete
pete

Reputation: 25091

Try this:

/* Artworks Hide/show text */
$(".item").hover(function () {
    //fadein second image using jQuery fadeIn 
    $(this).find('.art_title').fadeIn(200);
}, function () {
    //fadein first image using jQuery fadeIn
    $(this).find('.art_title').fadeOut(200);
});

Upvotes: 1

Related Questions