Отображать <div>при наведении курсора на другой div и его дочерние элементы

Question

У меня есть HTML div и внутри него есть дети. У меня есть событие jQuery mouseover, прикрепленное к div. При наведении указателя мыши я показываю еще один div, а при наведении курсора - скрываю его.

Однако, когда я наводю указатель мыши на div "premiumlink", все работает хорошо, но когда я наводю указатель мыши на дочерний элемент div, div который условно отображается, скрывается, но затем jQuery выясняет, что родительский div все еще находится над ним, и показывает его снова. Затем, если я перемещаю курсор обратно к родительскому div, div скрывается, а затем отображается снова.

Как я могу применить наведение и наведение курсора ко всем дочерним элементам, а не к этому нестабильному состоянию?

Вот мой HTML

<div class="platinumlevel" id="premiumlink">
    <h1>
        <img src="~/Content/Images/colorworld.png" alt="Logo" class="eventimage" />
        <a href="@Url.Action("Exhibitor1Attendee", "Home")" class="landing">Company Name</a>
    </h1>
    <div id="demopreview" style="display: none;">
        I should be displayed when "premiumlink" and all it's children are mouseovered
    </div>
</div>

JS

$("#premiumlink").mouseover(function () {
    $('#demopreview').show(1000);
}).mouseout(function () {
    $('#demopreview').hide(1000);
});

Answer 1

Измените ваше событие с наведения курсора на mouseenter en mouseout на mouseleave. Они работают лучше и практически во всех основных браузерах.

Документация MDN по поддержке

Это код, который вам понадобится:

$("#premiumlink").mouseenter(function () {
    $('#demopreview').show(1000);
}).mouseleave(function () {
    $('#demopreview').hide(1000);
});

Если вы не хотите использовать для этого JavaScript и jQuery, то же самое можно сделать с помощью CSS:

#demopreview {
    display: block
    transition: all 1s linear;
}

#premiumlink:hover #demopreview {
    display: block
}

Answer 2

Как говорит Douwe de Haan , вы должны использовать mouseenter и mouseleave вместо mouseover и mouseout соответственно.

$('#premiumlink').on('mouseenter', function(e) {
    $('#demopreview').show(100);
});

$('#premiumlink').on('mouseleave', function(e) {
    $('#demopreview').hide(100);
});