jquery - 使用 JQuery 仅显示/隐藏一个 DIV

Question

我有一页图像，我想在鼠标悬停时显示/隐藏标签。图像也是链接，div 称为“.smallproj”。JQuery 脚本效果很好，但是当我将鼠标悬停在 .smallproj a 的任何一个实例上时，当然会显示 .smallproj p 的所有实例。我知道我需要更改脚本，以便仅显示悬停在上方的 .smallproj 实例，但在这种情况下最好的方法是什么？

jQuery 脚本：

$(".smallproj a").on({
    mouseover: function() {
        $(".smallproj p").show();
    },      
    mouseout: function() {
        $(".smallproj p").hide();
    }       
});  

Answer 1

我认为你可以这样做：

$('.smallproj p').hover(function(){
  $(this).show();
});

或者，您似乎也想悬停链接，因此请尝试：

$('.smallproj a').hover(function(){
  $(this).find('p').show();
});

Answer 2

您可以使用各种方式。一些例子：

同一水平

$(".smallproj a").on({
    mouseover: function() {
        $(this).siblings("p").show();
    },      
    mouseout: function() {
        $(this).siblings("p").hide();
    }       
});  

在父级内部

$(".smallproj a").on({
    mouseover: function() {
        $(this).parent().find("p").show();
    },      
    mouseout: function() {
        $(this).parent().find("p").hide();
    }       
});  

信息：

1. 兄弟姐妹
2. 家长

Answer 3

您需要使用this关键字，它指的是事件所针对的元素，然后从它（a被悬停的元素）遍历到p要显示的元素。一般情况下，除了它们都在类的某个东西中之外，不对它们彼此相关的位置做出任何假设，这.smallproj将是这样的：

$(".smallproj a").on({
    mouseover: function() {
        $(this).closest(".smallproj").find("p").show();
    },      
    mouseout: function() {
        $(this).closest(".smallproj").find("p").hide();
    }       
});