jQuery выпадающий вопрос (не могу держать подменю видимым)

Question

Я строю небольшое выпадающее меню с помощью jQuery, но у меня небольшая проблема. Когда я вхожу в меню, оно опускается вниз, но когда я хочу перейти к раскрывающейся части с помощью мыши, оно возвращается вверх (скрывать). Это связано с тем, что разметка меню немного отличается от большинства раскрывающихся меню jQuery (я думаю).

Меню должно быть видно, если пользователь наведет курсор на тег, но поскольку тег div не является дочерним для тега, он исчезнет, ​​если пользователь оставит тег. Есть ли способ это исправить? Я не могу найти что-либо об этом в Интернете.

Разметка меню

     <ul>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
        <li>
            <span>Some text</span>
            <a href="#"><img src="icon.png"/></a>
            <div>here comes the dropdown list</div>
        </li>
    </ul>

jQuery-код разметки

    $('a').hover(function(){                     

        $(this).next('div').fadeIn(200);

    },function(){

        $(this).next('div').fadeOut(200);

    });

Answer 1

Затухание должно быть привязано не к якору, а к div.

Вы можете начать показывать div при наведении курсора:

$('a').on("mouseenter", function() {
  $(this).next('div').fadeIn(200);
});

Затем скрыть divкогда мышь покидает его:

$('div').on("mouseleave", function() {
  $(this).fadeOut(200);
});

Answer 2

Это потому, что ваше событие наведения нацелено на элемент ссылки, когда вы наводите курсор мыши на ссылку, вы скрываете элемент меню.

Чтобы предотвратить это поведение, просто нацельтесь на родительский элемент, в этом случае

:

$('li').hover(function(){

    $(this).children('div').fadeIn(200);

},function(){

    $(this).children('div').fadeOut(200);

});