Увеличить время задержки для блока

02 июня 2021, 12:40

Как возможно и вообще возможно ли увеличить время hover`a, т.е. при наведении на слово "Магия" появляется скрытый блок "lorem ipsum", как увеличить саму задержку этого блока, чтобы не зависимо от положения курсора он не пропадал секунд 30

Заранее спасибо!

.block{ 
  color: black; 
  border: 1px solid black; 
  width: 100px; height: 30px; 
  display: none; 
} 
 
.div1{ 
  font-size: 50px; 
  color: black; 
} 
 
.div1:hover ~ .block{ 
  display: block; 
}

<div class="div1">Магия</div> 
<div class="block">lorem ipsum</div>

Answer 1

Совсем простой вариант, если такой элемент на странице будет только один то в принципе подойдет, если же таких будет много, функцию нужно переделать.

foo(); 
function foo() { 
  let div1 = document.querySelector('.div1'); 
      if(!div1) return; 
  let block = document.querySelector('.block'); 
  let timeout = 30000; // Время задержки в миллисекундах 
   
  // При наведении на div1 
  div1.addEventListener('mouseover', () => { 
    // Показываем block 
    block.style.display = 'block'; 
    // Через заданное время скрываем его 
    setTimeout(() => block.style.display = 'none', timeout); 
  }); 
}

.block{ 
  color: black; 
  border: 1px solid black; 
  width: 100px; height: 30px; 
  display: none; 
} 
 
.div1{ 
  font-size: 50px; 
  color: black; 
}

<div class="div1">Магия</div> 
<div class="block">lorem ipsum</div>

Answer 2

Если надо через CSS, то можно попробовать зайти через прозрачность и размеры.

.block {
    width: 0;
    height: 0;
    opacity: 0;
    transition: all 0s ease-out 21s, opacity 1s ease-out 20s;
}
.div1:hover ~ .block {
    opacity: 1;
    height: 30px;
    width: 100px;
    transition: all 0s ease-out 0s;
}