CODEWITHSUNDEEP
jquerymouseover
Hercules S.
Hercules S.

Reputation: 363

Targeting 1 element not all jquery js

I have few spans in a grid and I have a small problem. When I hover 1 element all hidden spans activated. I would like to activate only one hovered.

                $('.tried-it').live('mouseover', function(){
                    $('.tried-times').fadeIn(500).addClass("show-me").removeClass("hide-me");
                });

                $(".tried-it").live('mouseout',function() { 
                    $(".tried-times").fadeOut(500).removeClass("show-me").addClass("hide-me");
                    return false; 

                });

and spans:

<span class="tried-times hide-me">30 times</span>
<span class="tried-it"></span>

Upvotes: 0

Views: 57

Answers (2)

adeneo
adeneo

Reputation: 318252

It seems like a strange way to structure your elements, but if they are placed just one after the other, I'd do something like:

$(document).on({
    mouseenter: function(){
        $(this).prev('.tried-times').addClass("show-me")
                                    .removeClass("hide-me")
                                    .fadeIn(500);
    },
    mouseleave: function() { 
        $(this).prev('.tried-times').fadeOut(500)
                                    .removeClass("show-me")
                                    .addClass("hide-me");
    }
}, '.tried-it');​

Here's a FIDDLE

Upvotes: 2

greg84
greg84

Reputation: 7609

Something like this should work, operating on the instance of the element that fired the event only. Notice that the selector is $(this) instead of $('.tried-times'):

$('.tried-it').live('mouseover', function(){
    $(this).fadeIn(500).addClass("show-me").removeClass("hide-me");
});

$(".tried-it").live('mouseout',function() { 
    $(this).fadeOut(500).removeClass("show-me").addClass("hide-me");
    return false; 
});

Upvotes: 0

Related Questions