Question

我有一页图像，我想在鼠标悬停时显示/隐藏标签。图像也是链接，div被称为“.smallproj”。 JQuery脚本运行良好，但当我将鼠标悬停在.smallproj a的任何一个实例上时，当然会显示.smallproj的所有实例。我知道我需要改变脚本，只有正在盘旋的.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();
    }       
});

信息：

Answer 3

您需要使用this关键字，该关键字引用事件所针对的元素，然后从中遍历（a元素正在悬停）到{{ 1}}要显示的元素。一般情况下，没有假设他们彼此之间的关系，除了他们都在p类的内容之外，将是这样的：

.smallproj

使用JQuery显示/隐藏一个DIV

3 个答案: