How to remove :hover on phones after <a> is clicked

I implemented "scroll to top" arrow from this codepen on my website:

jQuery:

// ===== Scroll to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});

CSS:

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

It works good on desktop, but has a problem on phone screens. When the arrow is clicked and the screen scrolled to top, if we scroll down again, the arrow gets shown in :hover state.

How can I "unset" the hover after the click?

EDIT:

Here's a screencast that shows the problem: https://streamable.com/5wr27

Since the :hover state you are referring to is lost when a mouse leaves the element, then all styles applied to such state are also lost, returning the element's styles to their originals.

This behavior does not happen in a mobile device screen since you have to press it with something, rather than just hovering over it. In this case the element retains the styles applied when pressing it, instead of losing them (as would happen when the mouse leaves the element).

All you have to do is return the element to its previous state manually, could be this:

// ===== Scroll to Top ==== 
$(window).scroll(function() {
  if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
    $('#return-to-top').fadeIn(200); // Fade in the arrow
  } else {
    $('#return-to-top').fadeOut(200); // Else fade out the arrow
  }
});
$('#return-to-top').click(function() { // When arrow is clicked
  $('body,html').animate({
    scrollTop: 0 // Scroll to top of body
  }, 500);
});
#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 13px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top:hover {
  background: rgba(0, 0, 0, 0.9);
}

#return-to-top:hover i {
  color: #fff;
  top: 5px;
}

#return-to-top:not(:focus),
#return-to-top:not(:active) {
  background: rgba(0, 0, 0, 0.7);
}

#return-to-top:not(:focus) i,
#return-to-top:not(:active) i {
  top: 13px
}


/* Extra Things */

body {
  background: #eee;
  font-family: 'Open Sans', sans-serif;
}

h3 {
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  margin-top: 50px;
}

h3 i {
  color: #444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Return to Top -->
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>


<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">


<!-- Test the scroll -->
<div style="height:2000px;">

  <h3>Scroll down</h3>
  <h3><i class="icon-arrow-down"></i>

</div>

The hover media query can help to remove hover styles on touch , The CSS media query hover can help to avoid staying hover styles on touch devices. If you want to get rid of hover states on touch devices you can use the hover CSS media if you want to try it on your mobile phone. #� Detect and Remove Hoverwatch. 2. Click on the settings. How to delete Hoverwatch for Android. 3. Touch to uninstall the application. How to easy uninstall the Hoverwatch. If you are not a user of the application, it will be slightly harder to uninstall the application. How to detect Hoverwatch is installed on your cell phone?

Just try javascript:

<a onclick="this.blur();">Top</a>

OR

$('#return-to-top').click(function() {
$(this).blur();
 $('body,html').animate({
      scrollTop : 0                       // Scroll to top of body
  }, 500);
});

CSS:

#return-to-top:focus {
  outline: none;
}

Remove hover effect on mobile, Hello, is it possible to remove the hover effect on mobile devices and to remove hover effect 🤔🤔remember after removing hover dropdown won't work Mhm, On my android Smartphone in chrome, the hover effect isnt the� On iOS :hover is triggered before the click event, so you will see the hover style for a brief moment before the page changes. Those are minor things, they don’t affect the functionality of the site. The real problem is a :hover that either hides or shows another element using display or visibility CSS properties.

I don't think you can have a :hover effect on touchscreens.

Instead maybe use a :active or :clicked selector inside a media query

media only screen and (max-width: 600px) { 
    return-to-top:active {
        background: rgba(0, 0, 0, 0.9);
    }
}

Something like that maybe? You can look up the right widths to use.

CSS magic, pt. 1: Prevent CSS hover on touch devices, I encountered a problem where a responsive web app — intended to behave differently based on device — triggered undesired hover effects� Any changes to the chat history can be seen by them, so try to avoid editing these messages. To leave a group chat, tap the chat header and then tap Leave chat. From the list of participants, hover on a person's name and select X to remove them from the chat.

I think that what is happening is that the :hover is always attached so it is been considerated as being hovered. So you need to remove the hover. I found that the solution can be by add

$('yourelement').die('click');

I hope that this solution helps you.

  $(window).scroll(function() {
  if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
     $('#return-to-top').fadeIn(200);    // Fade in the arrow
  } else {
     $('#return-to-top').fadeOut(200);
     $('a').die('click');
   // Else fade out the arrow
  }
});

4 novel ways to deal with sticky :hover effects on mobile devices, background: none; /* disable hover effect on touch devices */ Take a look at the following CSS media queries and the type of input devices� The pseudo-event-name "hover" is used as a shorthand for "mouseenter mouseleave" but was handled differently in earlier jQuery versions; requiring you to expressly remove each of the literal event names. Using $.off () now allows you to drop both mouse events using the same shorthand. Edit 2016:

Prevent css :hover on touch devices, Fold All; Unfold All. xxxxxxxxxx. 5. 1. <!-- should be the html element -->. 2. <div class="hover-active">. 3. <button class="hover-me">Hover me!!</button>. 4. .test:hover { border: 1px solid red; } In some cases I don't want to apply CSS on hover. One way would be to just remove CSS class from the div using jQuery but that would break other things since I also using that class to format its child elements. So that led me to question: Is there a way to remove 'hover' css styling from an element?

How to disable the ':hover' CSS rule for iPhone and iPad touch , How do I disable the ":hover" CSS rule for iPhone and iPad touch device browsers I have a CSS issue on my website that is only showing up on my iOS phone� Tech support scams are an industry-wide issue where scammers trick you into paying for unnecessary technical support services. You can help protect yourself from scammers by verifying that the contact is a Microsoft Agent or Microsoft Employee and that the phone number is an official Microsoft global customer service number.

Disable Hover on mobile and tablet, Does any body know if i can disable all hover on images for mobile & tablet devices? Thanks, G userAgent.match(/Windows Phone/i) ){ Quora is not Stack Overflow, nor should it become one. StackOverflow has an answer to your question With that said: Is it possible to detect current browser is in iPhone/ iPad?

Comments
  • if everything else fails, maybe try to remove and recreate it instead of hiding or add hover via jQuery not via CSS
  • Yes! Thank you! I've been scrolling the page up and down trying different things for way more hours than I'd like to admit. This worked.
  • Tried this, unfortunately it didn't help.
  • Yeah that's what kind of confuses me. I'm currently inspecting it on Chrome and using device toolbar to recreate phone screen. After the arrow gets clicked, and later it is shown again, it seems to have all the :hover styles applied to it. I also tested it with my phone, same happens.
  • I tried styling :active to be the same as the element without :hover, but no luck.
  • Unfortunately this doesn't help either. I added a screencast to the question so it's clearer.