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/