jquery mouseover 目标每个元素

Question

我想说当我将鼠标悬停在 .project 上时，我希望 p 标签出现。但是我编写的代码同时显示了每个项目的所有 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');
});