Delay before showing a div

Asked

Viewed 136 times

1

Okay, I don’t understand what I’m missing.

My idea was when to walk the mouse over a div, show the div who was hiding. 

.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 am trying to create a "delay" to not show the div "Hidden-container" instantly.

What I’m not able to do is create the 1 sec delay. before I show the div. I’ve seen the 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’ll accept it as a solution.

html css

3 answers

3


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

Animatable CSS properties

Alternatively you can use the property opacity:

.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>

0

Caique’s answer is valid, you can also use Transition working with colors, so your Hover is more pleasant and does not appear to the user in an "aggressive way".

.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>

0

Using Javascript you can pick up both events (mouseover and mouseleave) and with a setTimeout in the 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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.