Skip to main content
adicionou 273 caracteres ao conteúdo
Fonte Link
Laércio Lopes
  • 4,4mil
  • 3
  • 29
  • 52

Não é possível adicionar transição nos eventos: display e visibility.

Acredito que a melhor opçãoA explicação é a:

Ambos o visibility: hidden; e o display: none; não respondem a event handlers, enquanto que o opacity permite event handlers de serem chamados.

Então pode chegar ao resultado esperado utilizando opacity e a transição (transition) com 1 segundo:

#whatsapp{
position:fixed;
width:40px;
height:40px;
margin-top:calc(50vh - 55px);
background:url(img/whatsapp.png);
background-color: #25D366;
background-position: center center;
background-size: cover;
transition: all 1s;
}
#whatsapp:hover{
width:50px;
}

#whatsnumber{
opacity:0;
font-size:2rem;
position: fixed;
margin-top:calc(50vh - 55px);
margin-left: 40px;
width:max-width;
height:40px;
background: #25D366;
line-height: 40px;
border-right: 10px solid #25D366;
color: white;
transition: all 1s;
}

#whatsapp:hover ~ #whatsnumber{
opacity: 1;
}

#whatsnumber:hover{
displayopacity: 1;
}

#whatsapp:not(hover){
width:40px;
transition-duration: 0.2s;
}
<div id="whatsapp"></div>    
<div id="whatsnumber">(99)99999-9999</div>

Mais informações nessa pergunta: transition não funciona no Javascript

Não é possível adicionar transição nos eventos: display e visibility.

Acredito que a melhor opção é a opacity:

#whatsapp{
position:fixed;
width:40px;
height:40px;
margin-top:calc(50vh - 55px);
background:url(img/whatsapp.png);
background-color: #25D366;
background-position: center center;
background-size: cover;
transition: all 1s;
}
#whatsapp:hover{
width:50px;
}

#whatsnumber{
opacity:0;
font-size:2rem;
position: fixed;
margin-top:calc(50vh - 55px);
margin-left: 40px;
width:max-width;
height:40px;
background: #25D366;
line-height: 40px;
border-right: 10px solid #25D366;
color: white;
transition: all 1s;
}

#whatsapp:hover ~ #whatsnumber{
opacity: 1;
}

#whatsnumber:hover{
display: 1;
}

#whatsapp:not(hover){
width:40px;
transition-duration: 0.2s;
}
<div id="whatsapp"></div>    
<div id="whatsnumber">(99)99999-9999</div>

Não é possível adicionar transição nos eventos: display e visibility.

A explicação é:

Ambos o visibility: hidden; e o display: none; não respondem a event handlers, enquanto que o opacity permite event handlers de serem chamados.

Então pode chegar ao resultado esperado utilizando opacity e a transição (transition) com 1 segundo:

#whatsapp{
position:fixed;
width:40px;
height:40px;
margin-top:calc(50vh - 55px);
background:url(img/whatsapp.png);
background-color: #25D366;
background-position: center center;
background-size: cover;
transition: all 1s;
}
#whatsapp:hover{
width:50px;
}

#whatsnumber{
opacity:0;
font-size:2rem;
position: fixed;
margin-top:calc(50vh - 55px);
margin-left: 40px;
width:max-width;
height:40px;
background: #25D366;
line-height: 40px;
border-right: 10px solid #25D366;
color: white;
transition: all 1s;
}

#whatsapp:hover ~ #whatsnumber{
opacity: 1;
}

#whatsnumber:hover{
opacity: 1;
}

#whatsapp:not(hover){
width:40px;
}
<div id="whatsapp"></div>    
<div id="whatsnumber">(99)99999-9999</div>

Mais informações nessa pergunta: transition não funciona no Javascript

Fonte Link
Laércio Lopes
  • 4,4mil
  • 3
  • 29
  • 52

Não é possível adicionar transição nos eventos: display e visibility.

Acredito que a melhor opção é a opacity:

#whatsapp{
position:fixed;
width:40px;
height:40px;
margin-top:calc(50vh - 55px);
background:url(img/whatsapp.png);
background-color: #25D366;
background-position: center center;
background-size: cover;
transition: all 1s;
}
#whatsapp:hover{
width:50px;
}

#whatsnumber{
opacity:0;
font-size:2rem;
position: fixed;
margin-top:calc(50vh - 55px);
margin-left: 40px;
width:max-width;
height:40px;
background: #25D366;
line-height: 40px;
border-right: 10px solid #25D366;
color: white;
transition: all 1s;
}

#whatsapp:hover ~ #whatsnumber{
opacity: 1;
}

#whatsnumber:hover{
display: 1;
}

#whatsapp:not(hover){
width:40px;
transition-duration: 0.2s;
}
<div id="whatsapp"></div>    
<div id="whatsnumber">(99)99999-9999</div>