Почему не возникает событие mouseenter при наведении на ссылку с dropdow menu?

Question

[KataGol]

При наведении мыши на ссылку должен выпадать список, но код не срабатывает, ошибку не выдает.
https://jsfiddle.net/40fz3bp5/3/

Answer 1

[0xD34F]

Неправильно расположен элемент .submenu, он должен находится внутри того же li, что и соответствующий ему .profile-menu-trigger.

Ну и не надо назначать новый обработчик mouseleave при каждом mouseenter, достаточно и одного раза:

$('.profile-menu')
  .on('mouseenter', '.profile-menu-trigger', function() {
    $(this).next('.submenu').fadeIn(500);
  })
  .on('mouseleave', 'li', function() {
    $(this).find('.submenu').fadeOut(500);
  });

Comments

[KataGol]

Ура, заработало!!!!!! https://jsfiddle.net/jdotu84v/
Спасибо Вам огромное!

Answer 2

[Андрей Рязанцев]

Потому что повесили событие на скрытый элемент, вот и не работает.

$ ('#site-title'). on ('mouseenter', function () {
        let submenu = $ (this).parent ().find ('.submenu');
        submenu.fadeIn (500);

        $ ('#site-title'). on ('mouseleave', function () {
          submenu.fadeOut (500);
        });
    });