1

Ok, não estou a perceber o que me esta a falhar.

A minha ideia era quando passar com o rato em cima de uma div, mostrar a div que estava escondida.

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

Estou a tentar criar um "delay" para não mostrar a div "hidden-container" instantaneamente.

O que não estou a conseguir é criar o atraso de 1 seg. antes de mostrar a div. Já vi o transition-delay: 1seg; mas não estou a conseguir o que quero.

O perfeito era fazer isto em HTML + CSS. Mas se JS resolver o problema, aceitarei como solução.

3 Respostas 3

3

O display é uma propriedade que não permite animação, ou o campo é visível ou não, portante não é possível usar o display com o delay.

Animatable CSS properties

Como alternativa você pode usar a propriedade 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

A resposta do Caique é válida, você também pode utilizar o transition trabalhando com cores, assim o seu hover fica mais agradável e não aparece para o usuário de forma "agressiva".

.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

Usando JavaScript você pode pegar os dois eventos (mouseover e mouseleave) e com um setTimeout no mouseover construir o mesmo efeito:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .