Question

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>

Answer 1

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