доброго времени суток!
Сейчас реализовано показ блоков при наведении 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>
