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);
        });
    });

Answer 2

在处理程序中添加：

if( ev.target !== this ){ return; }

ev.target是鼠标事件触发的内容。 this是您将事件绑定到

的内容

javascript悬停问题

2 个答案: