Have Geek Brain

Easy jQuery question, nested selectors and parent

I would like to hover over an image and open a div without plugins. Just basic JQuery JQuery looks 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>

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

CSS (for whom it may be interesting)

.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 make the change

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

something like that:

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

So my actual question is, how do I fix the above line to make it work. Or am I completely wrong?

+2


a source to share


2 answers


Since div

it always appears to be the element after img

, you can simply use .next()

:

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


or with the filter on the safe side:

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


a source


you can use

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


This finds the next brother and displays it. It is highly dependent on the DOM structure. A more general solution might be to use $(this).nextAll('div')...

or $(this).parent().find('div')...

.

0


a source






More articles:


All Articles