Easy jQuery question, nested selectors and parent

Question

Hello,

I would like to hover an image and popup a div, without plugins. just basic jquery the jQuery is like this:

<script type="text/javascript">
$(document).ready(function() {
    $(".wrapperfortooltip div img").hover(
        function() {
            $(this).css('border', 'solid 1px #E90E65');
            $("div", this).stop().fadeIn();
        },
        function() {
            $(this).css('border', '1px solid #3E3D3D');
            $("div",this).stop().fadeOut();
        }
    );
});
</script>

The HTML is like this:

<div class="wrapperfortooltip">
    <div style="position:relative;">
        <img src="images/question.gif" alt="Tooltip" style="border: 1px solid #3E3D3D;" />
        <div class="tooltipVzw" style="position: absolute; display: none; width: 215px; top: 0px; left: -235px; ">
            Message to display nr one
        </div>
    </div>
    <div style="position:relative;">
        <img src="images/question.gif" alt="Tooltip" style="border: 1px solid #3E3D3D;" />
        <div class="tooltipVzw" style="position: absolute; display: none; width: 215px; top: 0px; left: -235px; ">
            Message to display
        </div>
    </div>
</div>

The CSS(for whom might be interested)

.tooltipVzw
{
    border: solid 1px #3e3d3d;
    color: #cfc6ca;
    font-size: 11px;
    padding: 9px 9px 9px 9px;
    background-image: url(images/tooltipvzwbg.jpg);
    background-repeat:repeat-x;
    background-color:#1c1c1c;
    text-align:left;
    line-height: 16px;
}

Now I have to find a way to do modify

$("div", this).stop().fadeIn();

to something like this:

$(this).parent().("div").stop().fadeIn();

so my actual question is; how do I fix the line above so that it works. or am I completely wrong?

thanks in advanced!

Answer 1

You could use

 $(this).next().stop().fadeIn();

This finds the next sibling and displays it. It's strongly dependent on the DOM structure. A more general solution might be to use $(this).nextAll('div')... or $(this).parent().find('div')....

Answer 2

As the div seems to be always the element after the img you can just use .next():

$(this).next().stop().fadeIn();

or with a filter to be on the safe side:

$(this).next('.tooltipVzw').stop().fadeIn();