JavaScript 悬停问题

Question

当我使用 jQuery 的 .hover() 或 Javascript 的 mouseenter() 时，该事件不仅在鼠标进入元素时触发，而且在鼠标穿过元素时触发该元素内的任何元素。如何停止此操作，以便仅在鼠标进入或退出该元素时触发，而子元素对事件没有影响？

       $(document).ready(function(){
            introAnimation();
            
            $('#nav-item1').hover(function() {
                $('#createSub').slideDown(300);
            });
            $('#nav-item1').mouseout(function() {
                $('#createSub').slideUp(300);
            });
            
            $('#nav-item2').hover(function() {
                $('#manageSub').slideDown(300);
            });
            $('#nav-item2').mouseout(function() {
                $('#manageSub').slideUp(300);
            });
            $('#nav-item3').hover(function() {
                $('#storeSub').slideDown(300);
            });
            $('#nav-item3').mouseout(function() {
                $('#storeSub').slideUp(300);
            });
        });

Answer 1

Hover 有一个取消悬停的方法。不需要 mouseout 事件，当您将鼠标悬停在嵌套子元素上时会触发该事件:

   $(document).ready(function(){
        introAnimation();

        $('#nav-item1').hover(function() {
            $('#createSub').slideDown(300);
        },function() {
            $('#createSub').slideUp(300);
        });
        $('#nav-item2').hover(function() {
            $('#manageSub').slideDown(300);
        },function() {
            $('#manageSub').slideUp(300);
        });
        $('#nav-item3').hover(function() {
            $('#storeSub').slideDown(300);
        },function() {
            $('#storeSub').slideUp(300);
        });
    });