@PressOff

Как скрывать блоки?

доброго времени суток!

Сейчас реализовано показ блоков при наведении 1 >2, 2>3 и скрытие всех блоков при потере фокуса с блока 3.

Задача:

Необходимо скрывать блоки 2 и 3 при потере фокуса с блока 2, скрывать блок 2 при потере фокуса блока 1. Подобный скрипт реализован на сайте g o o d s . r u (Каталог товаров).

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
  padding: 1rem 2rem;
  background: grey;
  border: 1px solid blue;
  margin-right: 5px;
  float:left;
  transition: 0.3s;
  border-radius: 15px;
}

div.hidden {
  display: none;
}

div:hover{
  background: blue;
  transition: 0.3s;
}
	</style>
</head>
<body>
	<div id="div1">1</div>
<div id="div2" class="hidden">2</div>
<div id="div3" class="hidden">3</div>

	<script>
		let timeout = null

div1.onmouseover = () => {
  div3.classList.add('hidden')
  div2.classList.remove('hidden')
}

div2.onmouseover = () => {
  clearTimeout(timeout)
  div3.classList.remove('hidden')
}

div3.onmouseout = () => {
  clearTimeout(timeout)

  timeout = setTimeout(() => {
    div3.classList.add('hidden')
    div2.classList.add('hidden')
  }, 100)
}
	</script>
</body>
</html>
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ответы на вопрос 1
@kirbi1996
Код js будет давать лишнюю нагрузку, поэтому попробуй рассмотреть решение задачи через css, с помощью hover, можно менять display block / none
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы