Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Márcia Estima
Márcia Estima
6,473 Points

Pseudo-class hover on mobile devices?

I'm learning CSS but I didn't figure out yet if the hover pseudo-class works in any way on mobile devices... Any clues?

6 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points

You may be able to get away with just using CSS, depending on what you're hovering over and it's use-case when clicked, if it is to be clicked.

An easy answer, though maybe not the best depending, again, on UX, would be to simply add :acitve or :focus to be included with your :hover rules. You may or may not need both, :active and :focus; perhaps one or the other may suffice.


.my-class:focus {

Another way to accomplish this, for elements which would only have a :hover situation (read: not a click like an anchor) is directly in your HTML markup by attaching the onclick attribute with a value of void(0).

Possibly, a better solution, if using this technique would be, especially on an anchor or other click element would be to use ontouchstart. With ontouchstart you can leave the value empty within the quotes. I previously made a Codepen experiment using this technique that you can check.

One caveat to using this approach is the user will have to tap outside of the element in order to lose focus in order to revert the element back to it's original state declared in the CSS.


<div class="my-class" onclick="void(0)"></div>

<!-- OR -->

<div class="my-class" ontouchstart=""></div>

Yet another way could be to use Modernizr as it provides .touch and .no-touch classes if the device/browser supports touch events or not. Then you could accomodate those users accordingly, such as not displaying/ performing the :hover effects for users that don't have hover events.

Hey Marcia, to be brief towrds your question, there is some pseudo-classes that work in mobile devices, like :active, but pseudo-class :hover, is activated when a pointer is hovering the tag to wich is applied, so since the mobile device doesnt have a pointer with a mouse or smthg, it cant be applied to it. i hope this helps ! Ayoub

Márcia Estima
Márcia Estima
6,473 Points

Thanks! So, is there a way to apply an alternative pseudo-class specific on mobile devices with media queries, or something? I was thinking in creating a gallery with images that animates with the hover pseudo-class, but I have to figure out how to adapt this animation on mobile devices...

actually , no idea, but look if you can use your animation by using Javascript !

I hope I ve helped

10,616 Points

The pseudo-class hover should @least work for samsung devices with the air-view function. I have encountered some hover`s with my note 4 using air-view combined with the pen =)