DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Related

  • Subtitles: The Good, the Bad, and the Resource-Heavy
  • Loader Animations Using Anime.js
  • Next.js Theming: CSS Variables for Adaptive Data Visualization
  • Creating Scrolling Text With HTML, CSS, and JavaScript

Trending

  • Mastering Fluent Bit: Installing and Configuring Fluent Bit on Kubernetes (Part 3)
  • AI Speaks for the World... But Whose Humanity Does It Learn From?
  • Four Essential Tips for Building a Robust REST API in Java
  • Mastering Advanced Traffic Management in Multi-Cloud Kubernetes: Scaling With Multiple Istio Ingress Gateways
  1. DZone
  2. Coding
  3. Languages
  4. Finally, a CSS Only Solution to :hover on Touchscreens

Finally, a CSS Only Solution to :hover on Touchscreens

It’s @media(hover: hover) and (pointer: fine) {}, but the specification has not been finalized yet.

By 
Mező István user avatar
Mező István
·
Mar. 18, 19 · Tutorial
Likes (3)
Comment
Save
Tweet
Share
26.6K Views

Join the DZone community and get the full member experience.

Join For Free
CSS :hover
There have been problems with the :hover pseudo-class ever since the first web browser was installed on a touchscreen device. Of course, there were solutions, but none were the solution. With the new Level 4 Media Queries, this issue seems like it’s solved for good.

‘Uhm… What’s the Problem Again?’

So let’s say you simply added a :hover styling to an element of your webpage, so it gets some styling when the mouse hovers over it. Easy.

Hovering on desktop. Source: https://proper-hovering.glitch.me

The problem arises when the user interacts with this element on a touchscreen: after the tap has occurred, the hover effect is stuck on the element. This also occurs when the element is not even activated by the tapping, for instance, if it was touched during scrolling.

If the dragging starts on the element, the hover effect is applied, because technically the pointer object (this is your finger most of the time) is over the styled element. This is a problem in itself: on a touch device, this translates as some unwanted interaction to the user.

However, it gets worse: after the dragging has stopped, the hover effect stays activated!

Hovering on a touchscreen (emulated). Source: https://proper-hovering.glitch.me

This will definitely confuse some of your users, and that is never a good thing. Something needs to be done.

‘There Must’ve Been a Solution Already…’

Well, there are some, most of them are covered in this excellent article. The best one of those includes using JavaScript to detect whether the screen has touch capabilities, applying a class to the body based on that and then explicitly referring to this class every time a :hover effect is added to any element.

body.nontouch nav a:hover {
    background: yellow;
}

This has had a few issues from the beginning:

  1. A developer can create the detection script that works well today, but what about in two months, when some new tech pops up? Laptops with touchscreens? Detachable touchscreens? Apple Pencil? I’d rather not worry about this during development.
  2. One would think that the JS community has a package ready and armed for just this problem, but that is not the case.
  3. When employing a component-based JS framework with encapsulated styles, this solution just throws a huge wrench in it. Any time hover effects are used, that component’s styles must reference this global class. Inconvenient.
  4. Not two projects that use this solution will be exactly the same. Maybe one works well on a special device, but not the other. There should be a standardized way to solve this.

Enter Level 4 Media Queries

Media queries are great. They singlehandedly enabled responsive web design, and are a cornerstone in today’s mobile-first web development. As an excellent initiative, the W3C added Interaction Media Features as a candidate recommendation for L4 Media Queries, which we can use to distinguish touchscreen devices.

The four media queries included are hover, any-hover, pointer, and any-pointer. These provide information about the hovering capability and the type of user inputs. The info can be about just the primary input, or about any input that is available. For instance, @media(hover: hover) will be true if the primary input can hover (e.g. a mouse cursor), and @media(any-pointer: coarse) will be true if any input is of limited accuracy (such as a touch input). These media features provide enough information to handle :hover properly.

One issue is that these queries are just a candidate recommendation at the moment, meaning that they could change or even be removed at any time. Keep this in mind when working with them, and decide if it works for your project. This definitely works for us at the moment, and we have high hopes for these specifications. The fact that all major browsers have implemented these queries (except IE of course), makes us even more optimistic for the future.

‘So, What Should I Do, Exactly?’

From a developer’s view, we are looking for a solution that is the easiest to use and maintain.
From a UX perspective, we are looking for a solution that is the least confusing and the most enjoyable for the user.

This means no hover effects on touchscreen-only devices, and using them everywhere else. The special case here is laptops with touchscreens, but there we can expect that the mouse/touchpad is used most of the time. Even if there is a stuck hover effect, the user can easily use the mouse/touchpad to double-check the problem and dismiss it. Fortunately, laptops with detachable touchscreens will go into a tablet mode when detached, which the media query correctly handles.

Here’s a test site where you can test your own device to see which of these media queries apply to it, and also see some of the most popular devices’ settings. Browsers on Android have some inconsistencies, but the other devices seem to have these sorted out. Checking these different devices, the bottom line is that targeting laptops is possible with the query @media(hover: hover) and (pointer: fine) {}.

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

Did I miss something? What do you usually use in these cases? I’m quite happy with this solution, but let me know if there’s a better one out there!

CSS

Published at DZone with permission of Mező István. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Subtitles: The Good, the Bad, and the Resource-Heavy
  • Loader Animations Using Anime.js
  • Next.js Theming: CSS Variables for Adaptive Data Visualization
  • Creating Scrolling Text With HTML, CSS, and JavaScript

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!