CODEWITHSUNDEEP
javascripthtmlcss
Nima Zarei
Nima Zarei

Reputation: 1202

Button Keeps :hover effect after being clicked on Mobile Screens

I have this scroll to top button that when it gets clicked on mobile screens, it keeps the color I've set for its hover effect and doesn't go back to the original one.

#back-to-top {
  background: none;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  position: fixed;
  bottom: 30px;
  right: 20px;
  color: rgb(255, 51, 0);
  z-index: 99;
  font-size: 2.5rem;
}

#back-to-top:hover {
  color: rgb(255, 0, 140);
}

This is the initial color of the button:

enter image description here

And after it's clicked on Mobile Screens, it keeps its new color until I click somewhere on the screen:

enter image description here

This only happens on Touch Screens and not in Desktop since the hover effect is somehow taken as a focus on Touch Screens.

How can I avoid this and keep the original color after it's clicked?

Upvotes: 1

Views: 3042

Answers (3)

Leroy Brockie
Leroy Brockie

Reputation: 1

If anyone is still having problems with 'Sticky' hover elements on mobile I found a nice solution!

Using javascript we can add a touch listener to our page to detect when the screen is touched, then simulate a 'Mouse up' event afterwards, this will remove the sticky click from your screen!

document.addEventListener('DOMContentLoaded', function() {
    // Function to determine if the device is touch-enabled
    function isTouchDevice() {
        return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
    }

    if (isTouchDevice()) {
        // Listen for touchend events on the entire document
        document.addEventListener('touchend', function(e) {
            
            // Simulate a mouse unclick by dispatching a 'mouseup' event
            let mouseUpEvent = new MouseEvent('mouseup', {
                bubbles: true,
                cancelable: true,
                view: window
            });
            
            // Dispatch the mouseup event on the target of the touch event
            e.target.dispatchEvent(mouseUpEvent);
            
            // Optionally, blur the active element to clear focus
            if (document.activeElement && document.activeElement !== document.body) {
                document.activeElement.blur();
            }
        });
    }
});

Upvotes: 0

A Haworth
A Haworth

Reputation: 36426

Try changing the color on hover only if the device has true hover functionality:

#back-to-top {
  background: none;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  position: fixed;
  bottom: 30px;
  right: 20px;
  color: rgb(255, 51, 0);
  z-index: 99;
  font-size: 2.5rem;
}

@media (hover: hover) {
  #back-to-top:hover {
    color: rgb(255, 0, 140);
  }
}
<button id="back-to-top">Top</button>

Upvotes: 4

Areg Nikoghosyan
Areg Nikoghosyan

Reputation: 521

Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this

@media (hover: hover) {
button:hover {
    background-color: blue;
   } }

Upvotes: 2

Related Questions