Задержка перед появлением элемента

21.02.2025 08:22:24 pm

#1

Здравствуйте.

Есть невидимый блок, с краткой информацией, который появляется при наведении на другой блок, так сказать, всплывающая подсказка. Но появляется она сразу, и это мешает. Допустим, курсор хотят навести на один блок, и ведя до него, стрелочкой проводят по соседнему блоку, что находится на пути, тут появляется подсказка и перекрывает нужный блок.

.information {
	display: none;
}

.branch:hover .information {
	display: block;
}

Чтобы не было таких неприятностей, надо сделать задержку появления всплывающей подсказки. Можно на JavaScript, лучше на чистом CSS. Хотя, без разницы, как.

Поможете реализовать?

Спасибо.

Жалоба

21.02.2025 08:59:00 pm

#2

Попробуйте на чистом CSS:

.information {
	opacity: 0;
	visibility: hidden;

	transition-property: opacity, visibility;
	transition-duration: 1s;
	transition-delay: 1s;
}

.branch:hover .information {
	opacity: 1;
	visibility: visible;
}

В свойствах transition-duration и transition-delay меняйте время нужное Вам, в секундах:

transition-duration: Продолжительность появления.
transition-delay: Задержка перед появлением.

Жалоба

1

22.02.2025 08:13:18 am

#3

Работает. Спасибо!
Но, когда уводишь курсор с блока, всплывающая информация, еще какое-то время висит, а надо, чтобы исчезала сразу.

Жалоба

22.02.2025 08:29:22 am

#4

Пробуйте:

.information {
	opacity: 0;
	visibility: hidden;

	transition-property: opacity, visibility;
	transition-duration: .1s;
	transition-delay: .1s;
}

.branch:hover .information {
	opacity: 1;
	visibility: visible;

	transition-property: opacity, visibility;
	transition-duration: 1s;
	transition-delay: 1s;
}

Опять же, настраивайте время, которое необходимо Вам.

Жалоба

1

22.02.2025 12:37:01 pm

#5

Большое спасибо! Лучше и не бывает!

Жалоба

22.02.2025 01:35:09 pm

#6

Такой вариант:
CSS:

.information {
	display: none;
}

JavaScript:

var branch = document.querySelector('.branch');

branch.addEventListener('mouseover', function() {
	setTimeout(function() {
		document.querySelector('.information').style.display = 'block';
	}, 1000);
});

Конечно, сыровато, конечно, надо доработать.

Жалоба

23.02.2025 05:47:18 am

#7

сказал:

Конечно, сыровато, конечно, надо доработать.

Очень сыровато:

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

Жалоба

24.02.2025 09:53:16 am

#8

Как то так:

var branch = document.querySelectorAll('.branch');

for (var i = 0; branch.length > i; i++) {
	branch[i].addEventListener('mouseover', function() {
		this.querySelector('.information').style.display = 'block';
	});

	branch[i].addEventListener('mouseout', function() {
		this.querySelector('.information').style.display = 'none';
	});
};

Надо допиливать, а я не силен. Могу только приблизительно сделать.

Жалоба

1

25.02.2025 07:03:53 am

#9

Пробую строку:

		this.querySelector('.information').style.display = 'block';

обвернуть в setTimeout, чтобы была задержка, но не хочет работать.

Жалоба