2

Eu tenho um elemento com hover que expande os canais de chat de um site. O problema é que no mobile, o hover só funciona quando eu clico no elemento. Dessa forma, para fechar os canais (fechar o hover) e fazer o elemento retornar ao estado inicial, eu tenho que clicar fora da área (body do documento) desse elemento.

O que eu quero saber é se é possível eu resetar o estado do hover quando, por exemplo, eu subir, passar, "scrollar" a página sem a necessidade de ter que clicar no body da página.

.central-chats {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999;
}

.central-chats>.inside {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
  border-radius: 100%
}

.central-chats:hover>.inside {
  width: 110px;
  height: 110px;
  border-radius: 100px 100px 45px 100px
}

.central-chats>.inside .icone-principal {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 25pt;
  background: #4267B2;
  color: white;
  border-radius: 100%;
  z-index: 9;
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.central-chats:hover .icone-principal {
  background: rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .6)
}

.central-chats>.inside>a>i {
  background: #DC493C;
  color: white;
  border-radius: 100%
}

.central-chats>.inside>a>i,
.central-chats>.inside>a>img {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20pt;
  position: absolute;
  opacity: 0;
  -webkit-transition: all .1s ease-in;
  -moz-transition: all .1s ease-in;
  -ms-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

.central-chats:hover>.inside>a>i,
.central-chats:hover>.inside>a>img {
  opacity: 1;
}

.central-chats>.inside>a>i:hover,
.central-chats>.inside>a>img:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

.central-chats a.messenger-whatsapp>img {
  left: 0;
  bottom: 0;
}

.central-chats a.messenger-facebook>img {
  top: 0;
  left: 0;
}

.central-chats a.email-modal>i {
  right: 0;
  top: 0;
}

@media only screen and (min-width: 768px) {
  .central-chats .hide-web {
    display: none
  }
}

@media only screen and (max-width: 767px) {
  .central-chats .hide-mobile {
    display: none
  }
}
<script src="https://use.fontawesome.com/38d45f7c1d.js"></script>
<div title="Fale Diretamente Conosco" class="central-chats">
  <div class="inside">
    <i class="fa fa-comments icone-principal" aria-hidden="true"></i>

    <!-- WHATSAPP -->
    <a class="hide-mobile messenger-whatsapp" href="#" target="_blank">
      <img title="Whatsapp" src="https://cdn.awsli.com.br/427/427452/arquivos/whats-messenger2.png">
    </a>

    <a class="hide-web messenger-whatsapp" href="#" target="_blank">
      <img title="Whatsapp" src="https://cdn.awsli.com.br/427/427452/arquivos/whats-messenger2.png">
    </a>

    <!-- FACEBOOK MESSENGER -->
    <a class="messenger-facebook" href="#" target="_blank">
      <img title="Facebook Messenger" src="https://cdn.awsli.com.br/427/427452/arquivos/face-messenger.png">
    </a>

    <!-- E-MAIL FORM MODAL -->
    <a class="email-modal" href="#modalContato" data-toggle="modal" data-target="#modalContato">
      <i title="E-Mail" class="fa fa-envelope" aria-hidden="true"></i>
    </a>
  </div>
</div>

Link do código no JSFiddle: https://jsfiddle.net/2y3erk8t/

3
  • Mostre o código de como é feito o hover. É via CSS ou JavaScript?
    – Sam
    Commented 13/05/2019 às 15:39
  • Sugiro que você leia as diretrizes da comunidade para postar uma boa pergunta. Logo mais está complicada de entender, faltando informação, uma explicação melhor e o código para os usuários poderem analisar.
    – user148754
    Commented 13/05/2019 às 15:42
  • CSS! Editei e coloquei o link do jsfiddle! É que imaginei que não haveria necessidade de por o código. Mas se não está claro, eu editei e mandei o link do código. Peço desculpas pelo transtorno.
    – Ivan Gomes
    Commented 13/05/2019 às 15:44

1 Resposta 1

2

Você teria que chamar os eventos :hover para uma classe específica e usar eventos no JavaScript para adicionar a classe aos elementos que sofrem a animação. Isso porque o JS não consegue alterar o estado :hover de um elemento.

Por exemplo, pode usar uma classe .ativo e usar o JS para ativar a animação apenas nos elementos que tiverem essa classe.

É simples. Coloque a classe .ativo onde tiver :hover no seu CSS (esse nome .ativo eu escolhi, mas você pode usar outro nome que quiser). Por exemplo:

                        ↓
.central-chats:hover>.ativo.inside {
  width: 110px;
  height: 110px;
  border-radius: 100px 100px 45px 100px
}

No JS você irá usar o evento onscroll para remover a classe .ativo dos elementos fazendo com que voltem ao estado normal, porque os estilos do :hover só irão funcionar nos elementos se eles tiverem essa classe.

Veja como fica o CSS e o JS:

document.addEventListener("DOMContentLoaded", function(){
   var div_principal = document.querySelector(".central-chats");
   var div_inside = document.querySelector(".central-chats > .inside");
   var i_icone = document.querySelector(".central-chats > .inside .icone-principal");
   
   div_principal.onmouseenter = div_principal.onclick = function(){
      div_inside.classList.add("ativo");
      i_icone.classList.add("ativo");
   }
   
   div_principal.onmouseleave = function(){
      div_inside.classList.remove("ativo");
   }
   
   window.onscroll = function(){
      div_inside.classList.remove("ativo");
      i_icone.classList.remove("ativo");
   }
});
.central-chats {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 999;
}

.central-chats>.inside {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
  border-radius: 100%
}

.central-chats:hover>.ativo.inside {
  width: 110px;
  height: 110px;
  border-radius: 100px 100px 45px 100px
}

.central-chats>.inside .icone-principal {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 25pt;
  background: #4267B2;
  color: white;
  border-radius: 100%;
  z-index: 9;
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  -ms-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.central-chats:hover .ativo.icone-principal {
  background: rgba(0, 0, 0, .2);
  color: rgba(255, 255, 255, .6)
}

.central-chats>.inside>a>i {
  background: #DC493C;
  color: white;
  border-radius: 100%
}

.central-chats>.inside>a>i,
.central-chats>.inside>a>img {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 20pt;
  position: absolute;
  opacity: 0;
  -webkit-transition: all .1s ease-in;
  -moz-transition: all .1s ease-in;
  -ms-transition: all .1s ease-in;
  -o-transition: all .1s ease-in;
  transition: all .1s ease-in;
}

.central-chats:hover>.ativo.inside>a>i,
.central-chats:hover>.ativo.inside>a>img {
  opacity: 1;
}

.central-chats>.inside>a>i:hover,
.central-chats>.inside>a>img:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}

.central-chats a.messenger-whatsapp>img {
  left: 0;
  bottom: 0;
}

.central-chats a.messenger-facebook>img {
  top: 0;
  left: 0;
}

.central-chats a.email-modal>i {
  right: 0;
  top: 0;
}

@media only screen and (min-width: 768px) {
  .central-chats .hide-web {
    display: none
  }
}

@media only screen and (max-width: 767px) {
  .central-chats .hide-mobile {
    display: none
  }
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div title="Fale Diretamente Conosco" class="central-chats">
  <div class="inside">
    <i class="fa fa-comments icone-principal" aria-hidden="true"></i>

    <!-- WHATSAPP -->
    <a class="hide-mobile messenger-whatsapp" href="#" target="_blank">
      <img title="Whatsapp" src="https://cdn.awsli.com.br/427/427452/arquivos/whats-messenger2.png">
    </a>

    <a class="hide-web messenger-whatsapp" href="#" target="_blank">
      <img title="Whatsapp" src="https://cdn.awsli.com.br/427/427452/arquivos/whats-messenger2.png">
    </a>

    <!-- FACEBOOK MESSENGER -->
    <a class="messenger-facebook" href="#" target="_blank">
      <img title="Facebook Messenger" src="https://cdn.awsli.com.br/427/427452/arquivos/face-messenger.png">
    </a>

    <!-- E-MAIL FORM MODAL -->
    <a class="email-modal" href="#modalContato" data-toggle="modal" data-target="#modalContato">
      <i title="E-Mail" class="fa fa-envelope" aria-hidden="true"></i>
    </a>
  </div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

1
  • Obrigado pela resposta! Eu fiz um pouco diferente mas segui a sua linha de raciocínio utilizando o .onscroll e as classes para chamar os estilos do :hover! Fiz mais para testar se realmente eu tinha aprendido. Mais uma vez, muito obrigado!
    – Ivan Gomes
    Commented 13/05/2019 às 18:44

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 .