Почему при наведении на элемент всплывающее окно исчезает при наведении на него?

Question

[Мариана Марианова]

У меня есть html

Текст текст текст <span class="span"><b>текст 1</b></span> <br>Текст текст текст
Текст текст текст <span class="span"><b>текст 2</b></span> <br>Текст текст текст
Текст текст текст <span class="span"><b>текст 3</b></span> <br>Текст текст текст
Текст текст текст <span class="span"><b>текст 4</b></span> <br>Текст текст текст
Текст текст текс т<span class="span"><b>текст 5</b></span> Текст текст текст

и я хочу, чтобы при наведении допустим на "текст 1" - у меня всплывало окошко, в котором я бы смогла нажать на кнопку "Узнать подробнее". Но при наведении на всплывающее окошко - оно исчезает, потому что получается происходит снятие курсора с "текст 1".
Код привела здесь
https://jsfiddle.net/zra0phvy/1/

Answer 1

[scottparker]

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

Comments

[Мариана Марианова]

подскажите пожалуйста какое событие нужно использовать в моем случае?

[scottparker]

Мариана Марианова, смотря чего вы хотите добиться, что бы оно не пропадало? тогда просто удалите описание mouseleave

[Мариана Марианова]

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

[scottparker]

Мариана Марианова, удалите описание события mouseleave для .span, тогда окно не будет пропадать если курсор будет убран со .span. затем добавьте событие mouseleave для всплывающего окна

[Мариана Марианова]

scottparker, точно. спасибо огромное за мысль!

[Мариана Марианова]

scottparker, а как сделать, чтобы всплывающее окно исчезало когда курсор выходит и за пределы "текст 1" и за пределы самого окна? Так можно вообще?

[scottparker]

Мариана Марианова, можно. посмотрите как навешивать события на динамически созданные элементы. ваше всплывающее окно таким является