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

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

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

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

我最近遇到了同样的问题。我所做的是将“{1}}事件添加到”child“元素中，所以当从父级传递给子级时，它不会被关闭。基本上我在这两个元素上都有mouseenter和mouseenter（这当然有点重叠，以便工作）。

Answer 3

如果菜单在广场内，您可以尝试这样的事情：

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

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

在将鼠标悬停在其子元素上时，如何阻止父节点的鼠标输出？

3 个答案: