siblings within a table in Jquery

I'm having a hard time trying to get this to work.

Here's my html layout

<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>

I want the "subpages-text" class to be hidden and when the used hovers over the "subpages-image" class I want it to show. I've tried multiple ways using css and .hove Jquery but can't get to target the right one.

As of now i fixed it by using:

p.subpages-text { display:none;}

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

but since the td has a padding then the area where you hover extends over the image.

This is my first post and I tried to do as much research as I could. Please let me know if I broke any rules. Cheers

Solution

First off you should give your p a different class than the td that it is in, otherwise your css rule will hide the container too (which will hide everything in it as well).

Then you can use jQuery to find the p.subpages-text that is nearest the img that you hover over.

To do that you could write something like this:

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

fiddle: http://jsfiddle.net/Aj87N/3/