как вы предотвращаете срабатывание мышки родителя при наведении на его дочерний элемент?

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 к элементу child, чтобы при передаче от parent к child оно не отключалось. В основном у меня есть mouseenter и mouseleave на обоих элементах (которые, конечно, слегка перекрывают друг друга для этой работы).

Answer 3

Если меню находится внутри квадрата, вы можете попробовать что-то вроде этого:

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

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