jquery - 将鼠标悬停在其子元素上时，如何防止父鼠标悬停触发？

Question

所以假设我有一个红色的正方形图像，当鼠标经过它时会变成绿色，当鼠标离开正方形时它会变回红色。然后我用它做了一个菜单之类的东西，这样当我将鼠标悬停在正方形上时，它会变成绿色，下面会出现一个矩形。

我想要发生的是：在矩形出现后，我将鼠标移出正方形并移到矩形上方，我希望正方形保持绿色，直到我将鼠标移出矩形。

我如何用 jquery 做到这一点？我使用的代码是这样的：

$('.square').hover(function() {
    $(this).addClass('.green'); 
    }, function() {
    $(this).addClass('.red');
});
$('.square').hover(function() {
    $(this).children('.rectangle').show(); 
    }, function() {
    $(this).children('.rectangle').hide();
});

Answer 1

您的代码中只有一些错误。

1. 您永远不会删除任何课程，您只会尝试添加课程。这只会工作一次，并且所有后续尝试都不会做任何事情，因为 jQuery 不会将同一个类两次添加到同一个元素。
2. 添加类时不应使用点语法。只需单独提供类名：

jQuery：

$('.square').hover(function() {
    $(this).addClass('green'); 
    $(this).children('.rectangle').show(); 
}, function() {
    $(this).removeClass('green');
    $(this).children('.rectangle').hide();
});

CSS：

/* Make sure .green comes after .red */
.red { background: red }
.green { background: green }

Answer 2

我最近遇到了同样的问题。我所做的也是向mouseenter“子”元素添加一个事件，因此在从父级传递给子级时它不会关闭。mouseenter基本上，我mouseleave在这两个元素上都有（当然，这会稍微重叠）。

Answer 3

如果菜单在正方形内，您可以尝试以下操作：

$('.square').bind("mouseenter",function(){
   $(this).addClass('green');
   $('.rectangle').show();
});

$('.square').bind("mouseleave",function(){
   $(this).addClass('red');
   $('.rectangle').hide();
});