Does CSS Hover Work on Mobile Devices

Does css hover work on mobile devices?

The :hover pseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointing and selecting/activating. Usually on mobile devices with a touch interface you don't have the former, only the latter. Also some pen interfaces only allow activating, not pointing.

The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e. g., a pen device).

—W3C: CSS 2.1: Selectors, dynamic pseudo-classes

So, to answer your question: It depends on the device but likely no. And don't rely on it. With touch-screen devices quickly gaining in popularity you'll lose the entirety of pointing-only events.

Changing :hover to touch/click for mobile devices

If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

You'd have to test the FIDDLE in a mobile environment. I can't at the moment.

correction - I just tested in a mobile, it works fine

CSS: hover, focus or active not working on mobile devices

A div element cannot be focused without a tab index. See what happens if you set the tab index of one of your divs to being a number.

Hover, of course, makes no sense if the interface is a touch interface. Fingers cannot hover over most touch screens, so I believe most mobile browsers either treat it funny or ignore it.

:hover imitation for mobile devices

You could use :active selector following the :hover pseudo class to achieve the desired effect in mobile devices.

.joffre-description:hover, .joffre-description:active {
    opacity: 1;
    transition: 0.5s;
}

Another interesting option to explore would be

 @media(hover: hover) and (pointer: fine) {
    //Code goes here.
 }

More on the same here - https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

is hover treated as focused on mobile browsers

According to W3, :hover is applied when "some pointing device" is placed over the element:

The :hover pseudo-class applies while the user designates an element
(with some pointing device), but does not activate it. For example, a
visual user agent could apply this pseudo-class when the cursor (mouse
pointer) hovers over a box generated by the element. User agents not
supporting interactive media do not have to support this pseudo-class.
Some conforming user agents supporting interactive media may not be
able to support this pseudo-class (e.g., a pen device).

W3 src

So, no, :hover might not, and is not on some, supported on mobile devices.

You should use :focus instead.

Does css hover work on mobile devices?

:hover behavior across mobile devices

Some say use :hover, others say use :active. I say use both (in one rule) and the device will use the one (or both) that works on that device.

I find it works, anyway.

Hope this helps.

---

Related Topics