当鼠标悬停在其子元素上时，如何防止父元素的 mouseout 触发？

发布于 2024-08-19 20:39:35 字数 493 浏览 5 评论 0原文

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

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

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

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

原文

So let's say I have a red square image that turns green when the mouse goes over it, and it turns back to red when the mouse leaves the square. I then made a menu sort of thing with it so that when I hover on the square, it turns green and a rectangle appears below it.

What I want to happen is this: After the rectangle appears and I move the mouse out of the square and over the rectangle, I want the square to remain green until I move the mouse out of the rectangle.

How do I do this with jquery? The code i use is something like this:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可爱暴击 2024-08-26 20:39:35

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

您永远不会删除任何类，您只会尝试添加类。这只会工作一次，并且所有后续尝试都不会执行任何操作，因为 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 }

You have just a few errors in your code.

You never remove any classes, you only try adding classes. This will only work once, and all subsequent tries won't do anything since jQuery will not add the same class twice to the same element.
You shouldn't use the dot syntax when adding classes. Just supply the class name by itself:

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 }

回复收藏 0 原文

莫相离 2024-08-26 20:39:35

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

回复收藏 0 原文

寄居人 2024-08-26 20:39:35

如果菜单位于方块内，您可以尝试如下操作：

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

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

If the menu is inside the square you can try something like this:

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

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

回复收藏 0 原文

~没有更多了~