Как при событии mouseleave учитывать переход на соседний элемент?

Question

[Ингвар Фон Бьёрк]

Есть кнопка при наведении на которую сразу под ней всплывает элемент (mouseover). Элемент скрывается по событию mouseleave на кнопке и самом элементе, но как учитывать переход на с кнопки на всплывающий элемент?

Comments

[WhiteBearDev]

Если я Вас верно понимаю, то проблема заключается в том, что всплывающий элемент лежит внутри кнопки, и наведение на кнопку отрабатывает и при наведении на всплывашку. В таком случае отлавливайте e.target

$(function(){
	$(".block").on("mouseover", function(e){
  	if($(e.target).hasClass("block__popup")){
    	console.log("inner block");
    }
  });
});

[Ингвар Фон Бьёрк]

WhiteBearDev, неа, всплывающий лежит выше кнопки.

Answer 1

[Ингвар Фон Бьёрк]

В итоге сделал небольшой велосипед: на кнопку и элемент при наведении добавляется класс и на этот класс вешается событие mouseout. В mouseout условие $('.класс:hover').length == 0 тогда выпадашска скрывается и класс удаляется со все элементов.

Answer 2

[Артем Спиридонов]

next(), а лучше через контейнер, closest(somecontainer).find(popover).show()

Comments

[Ингвар Фон Бьёрк]

next() ведь ищет следующий в DOM? Всплывашка лежит выше кнопки.

[Артем Спиридонов]

Ингвар Фон Бьёрк, prev(), а еще лучше - через контейнер. Кнопку со всплывашкой оберните в контейнер.

<div class="bubble_container">
<div class="bubble" style="display: none;">Some bubble content</div>
<button class="bubble_button"></button>
</div>

$(document).on('click', '.bubble_button', function() {
    $(this).closest('.bubble_container').find('.bubble').fadeIn();
});

[Артем Спиридонов]

Кстати, верстать и связывать с CMS так тоже удобнее.

[Ингвар Фон Бьёрк]

Артем Спиридонов, завернуть в контейнер было интересно, а то у меня из скрытых дочерних элементов брался html() и вставлялся в всплывашку. Надо будет в общей контейнер запилить.

Answer 3

[Sergey Pavlov]

Попробуйте onMouseOver событие. Ну если совсем в кратце, то как-то так https://pastein.ru/t/JX