Mouseenter не работает с div jquery

Question

У меня есть этот div, который, когда мышь входит в него, я хочу, чтобы он показывал кнопку внутри себя. Например вот код DIV:

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

А вот код JQuery:

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

Этот код, однако, не работает. Я попытался навести курсор мыши и навести курсор, но все равно ничего. Как изменить код, чтобы он отображал кнопку, когда мышь входит в div? Важно отметить, что я не могу дать этим элементам определенный идентификатор, потому что есть тридцать других div и кнопок с этими же классами.

Answer 1

next получает следующего брата. В этом случае .menuclear не является родным братом, это ребенок. Используйте find или children вместо:

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

Answer 2

Я думаю, что ваш код работает, только следующая функция является неправильной (он получил бы брат и сестра после элемента и проверить их для данного класса).

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