Skip to main content

Eu estou criando um site, e eu gostaria que nele houvesse um "botão" com o ícone do Whatsapp, e ao passar o mouse por cima desse botão, ele se expandisse e mostrasse o número que eu pus lá. Atualmente o código está assim:

HTML:

<div id="whatsapp"></div>    
<div id="whatsnumber">(4799)9854799999-7868<9999</div>

CSS:

#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;

}
#whatsapp:hover{
width:50px;
transition-duration: 0.2s;
}

#whatsnumber{
display:none;
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;
}

#whatsapp:hover ~ #whatsnumber{
display: block;
}

#whatsnumber:hover{
display: block;
}

#whatsapp:not(hover){
width:40px;
transition-duration: 0.2s;
}

A ideia é que tem duas DIVs, uma (#whatsapp) que ao passar o mouse por cima vai se expandir, e outra (#whatsnumber) que ao passar o mouse por cima deveria esperar um segundo e então aparecer.

Eu tentei usar o transition-delay para fazer o "display:block" ter efeito após um segundo, mas não está funcionando.

Como resolver?

Eu estou criando um site, e eu gostaria que nele houvesse um "botão" com o ícone do Whatsapp, e ao passar o mouse por cima desse botão, ele se expandisse e mostrasse o número que eu pus lá. Atualmente o código está assim:

HTML:

<div id="whatsapp"></div>    
<div id="whatsnumber">(47)98547-7868</div>

CSS:

#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;

}
#whatsapp:hover{
width:50px;
transition-duration: 0.2s;
}

#whatsnumber{
display:none;
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;
}

#whatsapp:hover ~ #whatsnumber{
display: block;
}

#whatsnumber:hover{
display: block;
}

#whatsapp:not(hover){
width:40px;
transition-duration: 0.2s;
}

A ideia é que tem duas DIVs, uma (#whatsapp) que ao passar o mouse por cima vai se expandir, e outra (#whatsnumber) que ao passar o mouse por cima deveria esperar um segundo e então aparecer.

Eu tentei usar o transition-delay para fazer o "display:block" ter efeito após um segundo, mas não está funcionando.

Como resolver?

Eu estou criando um site, e eu gostaria que nele houvesse um "botão" com o ícone do Whatsapp, e ao passar o mouse por cima desse botão, ele se expandisse e mostrasse o número que eu pus lá. Atualmente o código está assim:

HTML:

<div id="whatsapp"></div>    
<div id="whatsnumber">(99)99999-9999</div>

CSS:

#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;

}
#whatsapp:hover{
width:50px;
transition-duration: 0.2s;
}

#whatsnumber{
display:none;
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;
}

#whatsapp:hover ~ #whatsnumber{
display: block;
}

#whatsnumber:hover{
display: block;
}

#whatsapp:not(hover){
width:40px;
transition-duration: 0.2s;
}

A ideia é que tem duas DIVs, uma (#whatsapp) que ao passar o mouse por cima vai se expandir, e outra (#whatsnumber) que ao passar o mouse por cima deveria esperar um segundo e então aparecer.

Eu tentei usar o transition-delay para fazer o "display:block" ter efeito após um segundo, mas não está funcionando.

Como resolver?

Fonte Link

Como adicionar delay para Display:block

Eu estou criando um site, e eu gostaria que nele houvesse um "botão" com o ícone do Whatsapp, e ao passar o mouse por cima desse botão, ele se expandisse e mostrasse o número que eu pus lá. Atualmente o código está assim:

HTML:

<div id="whatsapp"></div>    
<div id="whatsnumber">(47)98547-7868</div>

CSS:

#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;

}
#whatsapp:hover{
width:50px;
transition-duration: 0.2s;
}

#whatsnumber{
display:none;
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;
}

#whatsapp:hover ~ #whatsnumber{
display: block;
}

#whatsnumber:hover{
display: block;
}

#whatsapp:not(hover){
width:40px;
transition-duration: 0.2s;
}

A ideia é que tem duas DIVs, uma (#whatsapp) que ao passar o mouse por cima vai se expandir, e outra (#whatsnumber) que ao passar o mouse por cima deveria esperar um segundo e então aparecer.

Eu tentei usar o transition-delay para fazer o "display:block" ter efeito após um segundo, mas não está funcionando.

Como resolver?