jQuery: Mousover в подменю div, которое должно оставаться открытым при наведении мыши

Question

Я уже искал и почему-то не нашел подходящий вопрос.. oO

Теперь у меня есть два div, "div 1", а другой скрыт ("подменю"). Теперь, если я наведу курсор на div 1, подменю появится рядом с div, что правильно. Но если я перенесу свою мышь в подменю, она исчезнет.

Это потому, что у меня есть триггер при наведении на div 1.

Если я разделю на mouson и mouseout, можно ли как-то сказать, что "подменю должно быть закрыто, когда mouseout, но ТОЛЬКО если курсор не находится в подменю"?

Спасибо за помощь!

Фло

Answer 1

Трюк требует двух вещей:

1. Родительский div, который охватывает как начальное меню (div 1), так и второе меню (подменю)
2. Используйте метод.mouseleave(), а не.mouseout() - и свяжите это с родительским div, упомянутым в #1

Пример jsFiddle

Вы не хотите использовать mouseout (), потому что он сработает, как только курсор перейдет во второе меню, так как это по существу "блокирует" его нахождение над родительским div. mouseleave(), с другой стороны, будет срабатывать только тогда, когда курсор больше не находится над родительским div или каким-либо из его дочерних элементов.

Answer 2

Если вам не нужна анимация, вы можете сделать это без JavaScript с помощью переключателя:hover, как это.