Calling a div that's a link in jQuery

Question

I'm having a little problem with my jQuery script.

I have a href link inside a div, that wasn't visible, when I hovered over it's parent div the div would become visible. This worked fine, but since the div that becomes visible had to be like a button I made the div inside the href since the wonderful world of html5 allow us to do this :).

But now the problem is that when I hover over the parent div it doesn't become visible anymore and I don't know how to call it, this has to be simple but I don't seem to find anything about it.

this is a part of the html:

<div id="evenementen" class="inforow">
    <div class="pic">
        <div class="aanwijzer"></div>
    </div>
    <div class="text">
        <h3>EVENEMENTEN</h3>
        <p>some text</p>
    </div>
    <a href="evenementen">
        <div class="button" style="display:none;">MEER INFO</div>
    </a>
</div>

As you can see the div is inside the a tag.

and this is my jQuery code:

$(document).ready(function() {
    var div = '';
    $(".inforow").hover(erover, eraf);

    function erover() { 
        div = $(this).attr('id');
        $("#" + div).stop().animate({marginTop:0, height:325},200);
        $(this).children(".button").show();
    }

    function eraf() {
        $(this).stop().animate({marginTop:20, height:285},200);
        $(this).children(".button").hide();
    }
});

So I assume the .button has to be changed in something else. I've tried things like .button a and even .button a:link (although this is even more far fetched). Anyway I hope someone knows the answer, and thanks in advance

Answer 1

Try:

$(this).find(".button").show()

instead of

$(this).children(".button").show()

The reason for this being that the div-button is no longer a direct child of the main (parent) div, but is now wrapped inside the a tag; for this reason, children() will not reach it whereas find() will.