How to prevent sticky hover effects for buttons on touch devices ?

27 Oct, 2020
When we add a hover effect to an element in CSS, it sticks in touch devices. In this article, we will learn how to solve this issue. 
There are two possible approaches to solve this problem –
1. Without Using JavaScript: It can be solved by using media query in CSS. The condition ‘hover: hover’ refers to the devices that support hover. Using media query along this condition ensures that the below CSS is added only on such devices.
Code snippet:
@media(hover: hover) {
    #btn:hover {
        background-color: #ccf6c8;
    }
}
This adds a hover effect only on hover enabled devices, which means no hover effect is applied on touch devices. Here the background color of the button is changed on hover.
Example:
<!DOCTYPE html><html>  <head>    <style>        #btn {            background-color: #0dad78;            margin: 3%;            font-size: 30px;        }          @media (hover: hover) {            #btn:hover {                  /*Add hover effect to button                 on hover enabled devices*/                background-color: #ccf6c8;            }        }    </style></head>  <body>    <button type="button" id="btn">        Submit    </button></body>  </html>
Output (on non touch screen):
The button retains its original state on touch devices as there is no hover effect.
2. Using JavaScript: In this method, we will use JavaScript to determine if we are on a touch enabled device using the below function. The ontouchstart event returns true when the user touches an element. The navigator.maxTouchPoints returns maximum number of simultaneous touch points supported by the device. The navigator.msMaxTouchPoints also has the same function with vendor prefix “ms” to target browsers IE 10 and below.
Thus the given function returns true if the device is touch enabled. (To read more about the function refer: https://www.geeksforgeeks.org/how-to-detect-touch-screen-device-using-javascript/)
function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}
If touch is not enabled, we add a class to our button. This class adds hover effect to the button in CSS as described in the below example:
Example:
<!DOCTYPE html><html>  <head>    <style>        #btn {            background-color: #0dad78;            margin: 3%;            font-size: 30px;        }          .btn2:hover {            background-color: #ccf6c8 !important;            /*Hover effect is added to btn2 class*/        }    </style></head>  <body onload="hover()">    <button type="button" id="btn">Submit</button>      <script>        function hover() {            function is_touch_enabled() {                  // Check if touch is enabled                return "ontouchstart"                    in window || navigator.maxTouchPoints > 0                    || navigator.msMaxTouchPoints > 0;            }            if (!is_touch_enabled()) {                  // If touch is not enabled, add "btn2" class                var b = document.getElementById("btn");                b.classList.add("btn2");            }        }    </script></body>  </html>
Output (on non touch devices):
The button retains its original state on touch devices as there is no hover effect.
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
Form validation using jQuery
How to Change the Position of Scrollbar using CSS ?
Build a Survey Form using HTML and CSS
REST API (Introduction)
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property