Reset, reset Hover behavior

Asked

Viewed 113 times

2

I have an element with Hover that expands the chat channels of a website. The problem is that on mobile, the Hover only works when I click on the element. Thus, to close the channels (close the Hover) and make the element return to the initial state, I have to click outside the area (body document) of that element.

What I want to know is if it’s possible reset the state of Hover when, for example, I go up, pass, "scroll" the page without having to click the body page.

.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>

Code link in Jsfiddle: https://jsfiddle.net/2y3erk8t/

javascript jquery html5 css3

  • Show the code of how Hover is done. It is via CSS or Javascript?

  • I suggest you read the community guidelines to post a good question. Soon more is complicated to understand, missing information, a better explanation and code for users to analyze.

  • CSS! I edited and put the jsfiddle link! It is that I imagined that there would be no need to put the code. But if it is not clear, I edited and sent the code link. I apologize for the inconvenience.

1 answer

2


You’d have to call the events :hover for a specific class and use events in Javascript to add the class to the elements that undergo animation. That’s because JS can’t change the state :hover of a single element.

For example, you can use a class .ativo and use JS to activate animation only on elements that have this class.

It’s simple. Put the class .ativo where you have :hover in your CSS (that name .ativo I chose, but you can use any other name you want). For example:

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

In JS you will use the event onscroll to remove the class .ativo of the elements causing them to return to their normal state, because the styles of the :hover will only work on the elements if they have this class.

See what CSS and JS looks like:

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>

  • Thanks for the reply! I did a little different but followed your line of reasoning using the .onscroll and classes to call the styles of :Hover! I did more to test if I really had learned. Again, thank you so much!

Browser other questions tagged javascript jquery html5 css3

You are not signed in. Login or sign up in order to post.