инкапсуляция div и якорной ссылки, привязанной к одному и тому же событию

Question

У меня проблемы с выяснением, как привязать mouseout () ко всей панели навигации, включая ссылки.

, когда пользователь наводит курсор на ссылку в #nav, отображается подменю.там все хорошо.

что я хочу сделать, так это fadeOut этого подменю, когда пользователь наводит курсор на весь # nav.

мой код для мышки:

$('#nav').mouseout(function() {
  setTimeout(function() {
   //$('.sub-link').fadeOut();
  }, 2000);
});

при наведении курсора на ссылку привязки, которая находится в #nav, я вижу подменю.тогда я думаю, что mouseout () даже срабатывает, а подменю исчезает.есть ли в любом случае #nav и любые якорные ссылки внутри него, чтобы он действовал как единое целое?

Я бы вставил свою разметку, но даже с отступом в 4 пробела все еще отображается как визуализированный html.образец страницы по адресу: http://chrisparaiso.com/test/

Answer 1

mouseleave() должно быть тем, что вам нужно:

$('#nav').mouseleave(function() {
  setTimeout(function() {
   $('.sub-link').fadeOut();
  }, 2000);
});

Из документации:

Событие отпускания мыши, с другой стороны,только запускает свой обработчик, когда мышь покидает элемент, с которым она связана, не является потомком .

Вы правы, что mouseout срабатывает, если курсор находится над элементомвнутри элемента, с которым вы связали событие.Но mouseleave действительно срабатывает только тогда, когда курсор покидает элемент while.

Этот пример очень сильно демонстрирует различия между mouseleave() и mouseout().

Answer 2

Попробуйте использовать селектор, например $('#nav, #nav > a')