針對1個元素不是所有jquery js

Question

我在網格中有幾個跨度，我有一個小問題。當我懸停1個元素時，所有隱藏跨度都被激活。我想只激活一個盤旋。

   $('.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; 

       }); 

和跨度：

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

Answer 1

這似乎是一個奇怪的方式來組織你的元素，但如果他們只是放置一個接一個，我會做一些事情，如：

$(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');​ 

這是一個FIDDLE

Answer 2

像這樣的事情應該工作，就只有觸發事件的元素的情況下運行。請注意，選擇是$(this)代替$('.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; 
});