Delay before showing a div

Question

Delay before showing a div

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)

1

Ok, I'm not realizing what's failing me.

My idea was when to hover over a div, show the div that was hidden.

.main_container:hover .hidden_container
{
  display: block;
}

.hidden_container
{
  display:none;
}

<body>
<div class="main_container">
  <p>On hover here</p>
  <div class="hidden_container">
    <p>Shows this</p>
  </div>
</div>

I'm trying to create a "delay" to not show the "hidden-container" div instantly.

What I can not do is create the delay of 1 sec. before showing the div. I've seen transition-delay: 1seg; but I'm not getting what I want.

The perfect thing was to do this in HTML + CSS. But if JS solves the problem, I will accept it as a solution.

html css

asked by anonymous 20.06.2018 / 23:34

3 answers

0

Caique's answer is valid, you can also use the transition working with colors, so your hover looks nicer and does not appear to the user aggressively.

.main_container:hover .hidden_container
{
  color: black;
  transition: color 1s;
  
  
}

.hidden_container
{
  color: white;
}

<div class="main_container">
  <p>Passe o mouse aqui.</p>
  <div class="hidden_container">
    <p>Exibido após 1 segundo.</p>
  </div>
</div>

21.06.2018 / 00:09

0

Using JavaScript you can get both events ( mouseover and mouseleave ) and with setTimeout on mouseover build the same effect:

var els = document.querySelectorAll(".main_container > p"); // seleciono todos os <p> filhos
var atraso; // declaro a variável que servirá com temporizador
for(x=0; x<els.length; x++){
   els[x].onmouseover = function(){
      var el = this; // <p> que chamou o evento
      atraso = setTimeout(function(){
         el.nextElementSibling.style.display = 'block'; // mostra a div que vem após o <p>
      }, 1000);
   }

   els[x].onmouseleave = function(){
      clearTimeout(atraso); // cancelo o temporizador
      this.nextElementSibling.style.display = 'none'; // esconde a div que vem após o <p>
   }
}

.hidden_container
{
  display:none;
}

<div class="main_container">
  <p>On hover here</p>
  <div class="hidden_container">
    <p>Shows this1</p>
  </div>
</div>

<div class="main_container">
  <p>On hover here</p>
  <div class="hidden_container">
    <p>Shows this2</p>
  </div>
</div>

21.06.2018 / 00:47

Enabling and Disabling Input Laravel call variable

score 3 · Accepted Answer

The display is a property that does not allow animation, or the field is visible or not, therefore it is not possible to use display with delay .

Animatable CSS properties

Alternatively you can use the opacity property:

.main_container:hover .hidden_container
{
  opacity: 1;
  transition-delay: 1s;
}

.hidden_container
{
  opacity: 0;
}

<div class="main_container">
  <p>Passe o mouse aqui.</p>
  <div class="hidden_container">
    <p>Exibido após 1 segundo.</p>
  </div>
</div>