Как решить проблему наведения попап?

Question

[Петр Сергеев]

Всем привет, может быть кто-то сталкивался с такой проблемой? Не знаю как ее можно решить даже, уже часа 4 сижу с этим
Вот код https://jsfiddle.net/1jz2pdoc/1/
В общем Нужно сделать следующий функционал,
1) При наведении на кнопку Вызов попап появляется попап меню
2) Если убрать наведение с кнопки Вызов попап , то попап меню исчезает
3) Если убрать наведение с самого попап меню , то этот попап также исчезает

Проблема в том, из-за зазора (скриншот) между кнопкой Вызов попап и самим попап срабатывает событие ухода с кнопки, то есть пункт 2 и попап закрывается. А нужно если ведешь курсор вниз от кнопки Вызов попап и пападаешь в этот зазор(скриншот) , то чтобы попап не закрывался.

Comments

[volucris1]

Это DropDown меню
Примеры

[Петр Сергеев]

volucris1, да, наверное не верно назвал. Посмотрел пару примером. Там нет такого кейса, о котором я написал. А если сдвинуть их дропдаун, чтобы образовался зазор, то появляется аналогичная проблема как у меня

[volucris1]

Петр Сергеев, можно поместить меню в контейнер, в контейнере добавить padding-top

[volucris1]

Петр Сергеев, вот здесь еще:
https://www.w3schools.com/howto/tryit.asp?filename...

[volucris1]

Петр Сергеев, как-то так, я сам еще много чего не знаю: https://jsfiddle.net/volucris1/0q6chegz/6/

[Петр Сергеев]

volucris1,

можно поместить меню в контейнер, в контейнере добавить padding-top

как это совместить с position? там же меню выходит из стандартного потока. Js высчитывать ширину и высоту?

[Петр Сергеев]

volucris1,

Петр Сергеев, вот здесь еще:
https://www.w3schools.com/howto/tryit.asp?filename...

здесь по клику с этим проблем не возникает

[volucris1]

Петр Сергеев, исправил: https://jsfiddle.net/volucris1/0q6chegz/6/

[volucris1]

Петр Сергеев, а вот без JS: https://jsfiddle.net/volucris1/0q6chegz/9/

[Петр Сергеев]

volucris1,

исправил: https://jsfiddle.net/volucris1/0q6chegz/6/

но теперь нет зазора, в том смысле, что в том месте должно быть прозрачно, а сейчас из-за padding там серо

[Сергей Сергей]

Можно сделать единую функцию всплытия/скрытия с соответствующим аргументом и в denounce её.

[volucris1]

Петр Сергеев,

[volucris1]

Петр Сергеев, https://jsfiddle.net/volucris1/0q6chegz/11/
Может я не ту ссылку скинул, я обычно не пользуюсь jsfiddle

[volucris1]

Сергей Сергей, можно обойтись одним CSS

[Петр Сергеев]

https://jsfiddle.net/volucris1/0q6chegz/11/
Может я не ту ссылку скинул, я обычно не пользуюсь jsfiddle

Да, теперь вижу, без js. Спасибо