Question

I have this div that when the mouse enters it, I want it to show a button within itself. For example here’s the code for the div:

<div id="menuitem1" style="height: 50px;" class="menuitem">
    <input type="button" class="menuclear" value="Clear" style="margin-left: 10px; display: none;"/>
</div>

And here is the jquery code:

$(".menuitem").mouseenter(function() {
$(this).next(".menuclear").show();
});

This code however doesn’t work. I’ve tried mouseover and hover but still nothing. How do I change the code to make it show the button when the mouse enters the div? It’s important to note that I cannot give these items specific id’s because there are about thirty other div’s and buttons with these same classes.

Answer 1

next gets the next sibling. In this case, .menuclear is not a sibling, it is a child. Use find or children instead:

$(".menuitem").mouseenter(function() {
    $(this).find(".menuclear").show();
});