The :hover CSS pseudo-class is incredibly useful for providing visual feedback on desktop websites, enhancing user interaction and making it clear which elements are interactive. However, on touch devices like smartphones and tablets, the :hover effect can become problematic. Touchscreens don’t have a true “hover” state; instead, the :hover effect often gets stuck after a user taps an element, creating an unintended and persistent highlight that disrupts the user experience. This can lead to confusion and frustration, especially when users expect the visual state to revert after they’ve finished interacting with the element. Learning how to remove/ignore :hover CSS style on touch devices is crucial for ensuring a polished and intuitive mobile experience. This article will explore several effective strategies to disable or modify :hover effects specifically for touchscreens, allowing you to create responsive designs that work seamlessly across all devices.
Understanding the Problem with :hover on Touch Devices
The core issue stems from how touch events are interpreted by browsers. A tap on a touchscreen is often registered as both a mousedown (or touchstart) and a mouseup (or touchend) event. The browser might temporarily apply the :hover style on the first touch, but because there’s no true “mouse out” event on a touchscreen (since there’s no cursor), the :hover style may remain active until another element is touched. This “sticky hover” effect is particularly noticeable on buttons, links, and other interactive elements, leading to a cluttered and unprofessional look. Itβs important to recognize that this isn’t a bug, but rather a consequence of how CSS was initially designed with mouse-based interactions in mind. As touch devices became more prevalent, developers needed to find workarounds to adapt existing designs.
Consider a navigation menu with dropdowns. On a desktop, hovering over a menu item reveals the dropdown. On a touch device, tapping the menu item might trigger the dropdown, but the :hover state could remain active on the tapped item even after the dropdown is closed, visually indicating that the item is still “selected” or “active” when it isn’t. This inconsistency creates a jarring experience for mobile users and can negatively impact usability. Disabling or modifying :hover on touch devices addresses this issue, allowing for a more consistent and predictable user interface.
According to a study by Statista, mobile devices account for approximately half of all web traffic worldwide [^1^][https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/]. This highlights the importance of optimizing websites for touchscreens, and addressing the :hover issue is a key part of that optimization process. Ignoring this aspect of mobile design can lead to a significant drop in user engagement and satisfaction.
Methods to Disable :hover on Touchscreens
Several techniques can be used to remove/ignore :hover CSS style on touch devices. The most common approaches involve using media queries, JavaScript, or CSS feature detection. Each method has its advantages and disadvantages, and the best choice depends on the specific project requirements and the level of control needed over the :hover behavior.
- Media Queries: This is a CSS-based approach that uses media queries to detect touch devices and conditionally apply styles.
- JavaScript Touch Detection: This method uses JavaScript to detect touch support and dynamically add a class to the body element.
One of the most straightforward methods is using CSS media queries. These queries allow you to apply different styles based on the characteristics of the device, such as screen size, resolution, and input method. By detecting whether a device supports hover interactions (i.e., is not a touchscreen), you can selectively disable or modify :hover effects.
The following CSS snippet demonstrates how to disable :hover effects on touch devices using media queries:
@media (hover: none) { :hover { / Remove hover styles / background-color: transparent !important; color: inherit !important; cursor: default !important; } }
This code snippet targets devices that do not support hover interactions (typically touchscreens) and removes any existing :hover styles. The !important flag ensures that these styles override any other :hover styles defined in your CSS. While effective, this approach might be considered a blunt instrument, removing all hover effects. A more nuanced approach may be required in some cases.
Using JavaScript for Touch Detection
JavaScript offers a more dynamic way to detect touch support and modify the :hover behavior. You can use JavaScript to check if the device supports touch events and then add a specific class to the body element. This class can then be used to selectively disable or modify :hover styles using CSS.
Here’s a JavaScript snippet that adds a touch-device class to the body element if touch support is detected:
document.addEventListener('touchstart', function onFirstTouch() { document.body.classList.add('touch-device'); document.removeEventListener('touchstart', onFirstTouch, false); }, false);
This JavaScript code listens for the first touchstart event, indicating that the user is interacting with the screen via touch. Once detected, it adds the class touch-device to the body element. This class can then be used in your CSS to target touch devices specifically.
With the touch-device class added, you can now modify your CSS to disable :hover effects on touch devices:
.touch-device :hover { background-color: transparent !important; color: inherit !important; cursor: default !important; }
Implementing Touch-Specific Styles
Instead of simply removing :hover effects, consider implementing touch-specific styles that provide appropriate visual feedback for touch interactions. This can involve using different visual cues, such as a subtle background color change or a brief animation, to indicate that an element has been tapped.
For example, you could use the :active pseudo-class, which is triggered when an element is being pressed, to provide visual feedback on touch devices:
a:active { background-color: eee; / A light gray background / }
This code snippet applies a light gray background color to links when they are tapped on a touch device. This provides immediate visual feedback to the user, indicating that their touch has been registered. It’s important to choose styles that are visually distinct from the default :hover styles to avoid confusion.
Another approach is to use CSS transitions to create subtle animations when an element is tapped. This can provide a more engaging and visually appealing experience for touch users. For example:
button { transition: transform 0.1s ease-in-out; } button:active { transform: scale(0.95); / Slightly scale down the button / }
Best Practices and Considerations
When dealing with :hover effects on touch devices, it’s essential to follow some best practices to ensure a smooth and consistent user experience. Avoid simply removing all :hover styles without providing alternative feedback. This can make your website feel unresponsive and less interactive. Instead, consider implementing touch-specific styles that provide appropriate visual cues for touch interactions. Make sure to test your website thoroughly on various touch devices to ensure that your styles work as expected.
Featured Snippet Optimized Paragraph: Use CSS media queries with the (hover: none) condition to target touch devices and disable or modify :hover styles. This prevents the “sticky hover” effect where :hover styles remain active after a tap. For example, @media (hover: none) { :hover { background-color: transparent !important; } } removes background color changes on hover for touchscreens.
Here’s a summary of key considerations:
- User Expectations: Consider what users expect to happen when they interact with elements on a touch device.
- Accessibility: Ensure that your touch-specific styles are accessible to users with disabilities.
Remember to prioritize the user experience and ensure that your website is easy to use and navigate on all devices. For more in-depth information on responsive web design, refer to resources like the Mozilla Developer Network [^2^][https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries].
FAQ
- Why does :hover not work well on touch devices?
- Touchscreens lack a true "hover" state, causing :hover styles to get stuck after a tap.
- What's the best way to disable :hover on touchscreens?
- Using CSS media queries with `(hover: none)` is a common and effective approach.
- Should I completely remove :hover effects on touch devices?
- No, consider providing alternative touch-specific styles instead.
- Can I use JavaScript to detect touch devices?
- Yes, JavaScript can detect touch support and add a class to the body, allowing for targeted CSS styling.
Effectively managing :hover states on touch devices is a crucial aspect of modern web development. By understanding the challenges and employing the techniques discussed, you can create responsive designs that provide a seamless and intuitive experience for all users. Whether you choose to use media queries, JavaScript, or a combination of both, the goal is to ensure that your website looks and functions flawlessly on touchscreens, offering a consistent and engaging user experience. Remember that addressing touch-specific interactions is not just about aesthetics; it’s about improving usability and accessibility.
Don’t let “sticky hovers” detract from your site’s usability. Experiment with the methods outlined above and find what works best for your project. By taking the time to optimize your website for touch devices, you’ll ensure a better experience for a significant portion of your audience. Why not start right now by implementing one of these strategies? You can also read up more about responsive design guidelines from Google [^3^][https://developers.google.com/web/fundamentals/design-and-ux/responsive/]. Your users will thank you for it!
Question & Answer :
I want to ignore all :hover CSS declarations if a user visits our website via touch device. Because the :hover CSS does not make sense, and it can even be disturbing if a tablet triggers it on click/tap because then it might stick until the element loses focus. To be honest, I don’t know why touch devices feel the need to trigger :hover in first place - but this is reality, so this problem is reality as well.
a:hover { color:blue; border-color:green; /* etc. > ignore all at once for touch devices */ }
So, (how) can I remove/ignore all CSS :hover declarations at once (without having to know each one) for touch devices after having them declared?
tl;dr use this: https://jsfiddle.net/57tmy8j3/
If you’re interested why or what other options there are, read on.
Quick’n’dirty - remove :hover styles using JS
You can remove all the CSS rules containing :hover using Javascript. This has the advantage of not having to touch CSS and being compatible even with older browsers.
function hasTouch() { return 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; } if (hasTouch()) { // remove all the :hover stylesheets try { // prevent exception on browsers not supporting DOM styleSheets properly for (var si in document.styleSheets) { var styleSheet = document.styleSheets[si]; if (!styleSheet.rules) continue; for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) { if (!styleSheet.rules[ri].selectorText) continue; if (styleSheet.rules[ri].selectorText.match(':hover')) { styleSheet.deleteRule(ri); } } } } catch (ex) {} }
Limitations: stylesheets must be hosted on the same domain (that means no CDNs). Disables hovers on mixed mouse & touch devices like Surface or iPad Pro, which hurts the UX.
CSS-only - use media queries
Place all your :hover rules in a @media block:
@media (hover: hover) { a:hover { color: blue; } }
or alternatively, override all your hover rules (compatible with older browsers):
a:hover { color: blue; } @media (hover: none) { a:hover { color: inherit; } }
Limitations: works only on iOS 9.0+, Chrome for Android or Android 5.0+ when using WebView. hover: hover breaks hover effects on older browsers, hover: none needs overriding all the previously defined CSS rules. Both are incompatible with mixed mouse & touch devices.
The most robust - detect touch via JS and prepend CSS :hover rules
This method needs prepending all the hover rules with body.hasHover. (or a class name of your choice)
body.hasHover a:hover { color: blue; }
The hasHover class may be added using hasTouch() from the first example:
if (!hasTouch()) document.body.className += ' hasHover'
However, this whould have the same drawbacks with mixed touch devices as previous examples, which brings us to the ultimate solution. Enable hover effects whenever a mouse cursor is moved, disable hover effects whenever a touch is detected.
function watchForHover() { // lastTouchTime is used for ignoring emulated mousemove events let lastTouchTime = 0 function enableHover() { if (new Date() - lastTouchTime < 500) return document.body.classList.add('hasHover') } function disableHover() { document.body.classList.remove('hasHover') } function updateLastTouchTime() { lastTouchTime = new Date() } document.addEventListener('touchstart', updateLastTouchTime, true) document.addEventListener('touchstart', disableHover, true) document.addEventListener('mousemove', enableHover, true) enableHover() } watchForHover()
This should work basically in any browser and enables/disables hover styles as needed.
Here’s the full example - modern: https://jsfiddle.net/57tmy8j3/
Legacy (for use with old browsers): https://jsfiddle.net/dkz17jc5/19/
