Reputation: 321
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
Upvotes: 0
Views: 448
Reputation: 33637
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.
Upvotes: 2