jquery mouseover目標每個元素

Question

我想說當我把鼠標懸停在.project上時，我想要p標籤出現。但是我寫的代碼同時顯示了每個項目的所有p標籤。我怎麼能這樣說，只有當我在那個項目下的項目出現時纔會出現。無需添加額外的類？

$(document).ready(function() { 

$('.project').hover(
    function() { 
     $('.project p').css({"visibility":"visible"}); 
    }, 
    function() { 
     $('.project p').css({"visibility":"hidden"}); 
    } 
); 

}); 

Answer 1

您需要使用this關鍵字，要做到這一點，你需要使用find()？

$(document).ready(function() { 

    $('.project').hover(
     function() { 
      $(this).find('p').css({"visibility":"visible"}); 
     }, 
     function() { 
      $(this).find('p').css({"visibility":"hidden"}); 
     } 
    ); 
}); 

這裏是另一種方式來做到這一點

$('.project').on('mouseenter mouseleave', function(e) { 
    $('p', this).css('visibility', e.type == 'mouseenter' ? 'visible' : 'hidden'); 
});