jquery - jQuery中的表中的 sibling

我很难使它正常工作。

这是我的html布局

<td class="subpages-cell">
<span class="subpages-posts-image">
    <a href="">
         <figure class="tint t7">
             <img src="" class="subpages-image">
         </figure>
    </a>
</span>
<p class="subpages-text">
    <a href="">Hello</a>
</p>
</td>

我希望隐藏“ subpages-text”类，并且当用过的鼠标悬停在“ subpages-image”类上时，我希望它显示。
我已经尝试过使用css和.hove Jquery的多种方法，但无法定位正确的方法。

截至目前，我通过使用以下方式修复了问题：

p.subpages-text { display:none;}

.subpages-cell:hover p.subpages-text a {display:block;}

但由于td带有填充，因此您将鼠标悬停的区域会覆盖图像。

这是我的第一篇文章，我尝试了尽可能多的研究。如果我违反任何规则，请告诉我。
干杯

最佳答案

首先，您应该给您的p一个不同于其所在的td的类，否则您的CSS规则也会隐藏该容器（也将隐藏其中的所有内容）。

然后，您可以使用jQuery查找最接近您悬停的p.subpages-text的img。

为此，您可以编写如下内容：

$('.subpages-image').hover(
    function(){
        $(this).closest("span").siblings(".subpages-text").show();
    },
    function(){
        $(this).closest("span").siblings(".subpages-text").hide();
    }
);

小提琴：http://jsfiddle.net/Aj87N/3/

关于jquery - jQuery中的表中的 sibling ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15770900/