Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to prevent sticky hover effects for buttons on touch devices?
In touch devices, an element sticks when a hover effect is added to it using CSS. This article will teach us how to deal with this problem.
On touch devices, there is no hover effect, therefore the button stays in its original state. Without the Use of JavaScript: CSS's media query function can be used to fix the problem. Devices that support hover are those that match the requirement "hover: hover". To ensure that the CSS below is added only on these devices, use media query along with this condition. Only hover-enabled devices will see the added hover effect; touch devices won't see any hover effect. When you hover over this button, the background colour changes. JavaScript is used here to retrieve values from an HTML input array.
As you are aware, touch screen technology does not support :hover behaviour. As a result, while creating a responsive website, you should carefully consider when and where to use :hover interactions. Some touch screen devices will lose the :hover effect of simple links that open a URL. You will see the :hover style for a small period of time before the page changes on iOS because :hover is activated before the click event.
These are small issues that have no effect on the website's functionality. Here a:hover, which either uses the display or visibility CSS properties to show or hide another element, is the real issue.
There are two methods that could be used to resolve this issue.
One without JavaScript − The CSS media query function can be used to fix it. The devices that support hover are referred to by the condition "hover: hover". Adding the following CSS only on such devices is guaranteed by using media query together with this condition.
Snippet of code
@media(hover: hover) {
#btn:hover {
background-color: #ccf6c8;
}
}
Example 1
This only adds a hover effect to hover-enabled devices; no hover impact is added to touch devices. In this case, the button's background colour changes when it is hovered over. On touch devices, there is no hover effect, therefore the button stays in its original state.
<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#myButton {
background-color: #096381;
margin: 3%;
font-size: 30px;
color: #fff;
}
@media (hover: hover) {
#myButton:hover {
/*On devices that support hover, add a hover effect to the button.*/
background-color: #0a92bf;
}
}
</style>
</head>
<body>
<h2>Welcome to TutorialsPoint!</h2>
<p>Our mission is to deliver Simply Easy Learning with clear, crisp, and to-the-point content on a wide range of technical and non-technical subjects without any preconditions and impediments.</p>
<button type="button" id="myButton">
Submit
</button>
</body>
</html>
The above code will give the below output: This is the outcome on non-touch scree.
Second with JavaScript − The following function in JavaScript will be used in this method to check whether we are using a touch-enabled device. Whenever a user touches an element, the ontouchstart event responds with a true value. The maximum number of continuous touch points that the device supports is returned by navigator.maxTouchPoints.
The same functionality is available under the vendor prefix "ms" in navigator.msMaxTouchPoints, which targets IE 10 and earlier browsers. As a result, if the device supports touch, the specified function returns true.
Snippet of code
function is_touch_enabled() {
return ('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0);
}
Example 2
In this example let us understand how to add a class to our button if touch is not enabled. As shown in the code below, this class provides a hover effect to the button in CSS −
<!DOCTYPE html>
<html>
<title>How to prevent sticky hover effects for buttons on touch devices - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#myButton {
background-color: #096381;
margin: 3%;
font-size: 30px;
color: #fff;
}
.myButton2:hover {
background-color: #0a92bf !important;
/*The myButton2 class now has a hover effect.*/
}
</style>
</head>
<body onload="touchHover()">
<p>TutorialsPoint have established a Digital Content Marketplace to sell Video Courses and eBooks at a very nominal cost. <br>You will have to register with us to avail these premium services.</p>
<button type="button" id="myButton">Submit</button>
<script>
function touchHover() {
function is_touch_enabled() {
// Verify that touch is turned on
return "ontouchstart" in window || navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0;
}
if (!is_touch_enabled()) {
// Add the "myButton2" class if touch is not enabled.
let verifyTouch = document.getElementById("myButton");
verifyTouch.classList.add("myButton2");
}
}
</script>
</body>
</html>
The above code will give the below output: This is the outcome on non-touch devices.
Since there is no hover effect on touch devices, the button stays in its original state.
1K+ Views
