0

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?

1
  • Você gostaria de uma forma de aumentar a sua div ao passar por cima da mesma? Commented 29/09/2017 às 12:29

2 Respostas 2

2

Segue uma alternativa.

div {
  clear: both;
}

.icon {
  position: absolute;
  top: 0px;
  left: 0px;  
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
  background-size: calc(100% - 4px);
  background-position: center;
}

.social {
  position: relative;
  float: left;
  width: 32px;
  padding-left: 32px;
  box-sizing: border-box;
  overflow: hidden;  
  line-height: 32px;
  border-radius: 5px;
  box-shadow: 0px 0px 5px black;
  white-space: nowrap;
  transition: width 0.5s linear;
  margin: 3px 0px;
}

.social:hover {
  width: 150px;
}

.icon-whatsapp {
  background-image: url('https://image.flaticon.com/icons/svg/220/220236.svg');
}

.icon-skype {
  background-image: url('https://image.flaticon.com/icons/svg/220/220235.svg');
}

.icon-tweet {
  background-image: url('https://image.flaticon.com/icons/svg/220/220233.svg');
}

.icon-facebook {
  background-image: url('https://image.flaticon.com/icons/svg/220/220200.svg');
}
<div class="social">
  <div class="icon icon-whatsapp"></div>
  (99)99999-9999
</div>
<div class="social">
  <div class="icon icon-skype"></div>
  (99)99999-9999
</div>
<div class="social">
  <div class="icon icon-facebook"></div>
  (99)99999-9999
</div>
<div class="social">
  <div class="icon icon-tweet"></div>
  (99)99999-9999
</div>

0

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

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 .