I'm creating a website, and I'd like it to have a "button" with the WhatsApp icon, and by hovering over that button, it would expand and show the number I put there. Currently the code looks like this:
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;
}
The idea is that there are two DIVs, one (#whatsapp) that when the mouse over will expand, and another (#whatsnumber) that when you mouse over it should wait a second and then appear. p>
I tried to use the transition-delay to make the "display: block" take effect after a second, but it is not working.
How to solve?