显示/隐藏只有一个DIV与JQuery

我有一个图像页面，我想要显示/隐藏鼠标悬停的标签。图像也是链接，div被称为“.smallproj”。 JQuery脚本效果很好，但是当我将鼠标悬停在任何一个.smallproj实例上时，它显示.smallproj p的所有实例。我知道我需要改变脚本，使得只有展示的.smallproj实例才能被展开，但在这种情况下，最好的方法是什么？显示/隐藏只有一个DIV与JQuery

jQuery脚本：

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

来源

2013-02-22 JD Pirtle

请发表您的HTML。 – zakangelle 2013-02-22 18:03:35

你想使用this关键字，它指的是由事件指向的元素，然后从它（a元素正在上空盘旋）穿越到要在p元素显示。一般情况下，作出任何关于他们的关系，只是他们都是里面的东西与.smallproj类彼此这里假设，将是这样的：

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

来源

2013-02-22 18:05:14 antialiasis

谢谢！这正是我想要完成的，并对正在做的事情做出了很好的解释。 – 2013-02-22 19:22:06

我认为你可以这样做：

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

或者说，它看起来像你也想悬停链接，这样试试：

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

来源

2013-02-22 18:03:26 user1477388

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

同一级别

$(".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(); 
    }  
});

底蕴：

来源

2013-02-22 18:03:54 Niels

显示/隐藏只有一个DIV与JQuery

回答

相关问题