Related Articles

Related Articles

How to prevent sticky hover effects for buttons on touch devices ?
  • Last Updated : 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output (on non touch devices):

The button retains its original state on touch devices as there is no hover effect.

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :