CSS :Hover on Mobile or Other Device as Toggle

CSS :hover on mobile or other device as toggle

Your question isn't totally clear and I cannot understand whether you're asking "Can I use :hover across all the devices?" or "Will :hover behave the same across all the devices?" or "Is :hover a standard element on the web?"

Also it greatly depends of your concept of "all devices", if you have in mind the currently most used devices or you are taking in account also the less-known and used devices.

I will quote you the following, but I am pretty sure you have already read that:

Interactive user agents sometimes change the rendering in response to
user actions. CSS provides three pseudo-classes for common cases:

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). The :active
pseudo-class applies while an element is being activated by the user.
For example, between the times the user presses the mouse button and
releases it.

CSS does not define which elements may be in the above states, or how
the states are entered and left. Scripting may change whether elements
react to user events or not, and different devices and UAs may have
different ways of pointing to, or activating elements.

5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

As you can see on the W3C specification it claims that the :hover pseudo-class is not required to a non-interactive media user agents as well as some interactive media user agents.
Therefore is safe to assume :hover is not always supported.

To dig deep on the matter, take a read at the following specification for Safari Mobile:

Additionally, Safari on iOS users interact with your web content
directly with their fingers, rather than using a mouse. This creates
new opportunities for touch-enabled interfaces, but does not work well
with hover states. For example, a mouse pointer can hover over a
webpage element and trigger an event; a finger on a Multi-Touch screen
cannot. For this reason, mouse events are emulated in Safari on iOS.
As a result, elements that rely only on mousemove, mouseover, mouseout
or the CSS pseudo-class :hover may not always behave as expected on a
touch-screen device such as iPad or iPhone.

You can handle touches directly or even detect advanced gestures in
Safari on iOS, using the DOM Touch events touchstart, touchmove,
touchend, and touchcancel. Unlike mouse events which are emulated, DOM
Touch events are specifically designed to work with touch interfaces,
so their behavior is reliable and expected.

5. Prepare for a touch interface
https://developer.apple.com/library/content/technotes/tn2010/tn2262/_index.html

Apple clearly states here that they tend to emulate the pointer with the touch gestures, however they clearly suggest to avoid using the :hover pseudo-class as won't behave the same on their touch device.

We could dig deeper and fetch every documentation for each user-agent existing on earth but the previous two are enough to assume the following:

• Non interactive devices do not have to support :hover
• Interactive devices can support the pseudo-class (but it's not mandatory and they can ignore it, for example screen-readers or braille screens)
• Apple touch devices in absence of a pointer emulates :hover
• It is safe to assume current touch devices also emulates :hover
• It is safe to assume any other browser/device don't necessarily have to support :hover depending on their interface.
• Very likely the recent browsers will all support :hover because is a visual aid for the user.

So to answer to all the question(s) I have assumed above:

"Is :hover a standard element on the web?"

Hover is a standard W3C in fact it claims it must be triggered by a pointer event, but isn't required for some interfaces.

"Can I use :hover across all the devices?"

Yes you probably can. The devices which won't support :hover very likely are devices/users that probably aren't your main target. Better ask yourself "Who will be the end-user of my product?" if they are only mobile users or only blind people or only people who like to browse using the Nintendo DS then don't use :hover events, otherwise do.

"Will :hover behave the same across all the devices?"

No, as Apple stated on their devices will not behave the same as a desktop would, and that probably reflects the same behaviour on all devices without a pointer.

If you plan to have an user action via a hover state don't do it. This is generally bad practice and it should avoided in any case, including desktop devices. Hover is not an call to action, click is. Hover should not be treated as a "toggle" but more like a visual helper for the user making him/her understand that element, if clicked, triggers an action.

If I understood your application then hover isn't reliable and in your specific case you should rethink on how it should work.
Use a more reliable method (and expected from your user)

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

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.

Switch hover effect to link when on mobile device or small display

Yes,

that's a common approach.

Look how the bootstrap Front End framework handles this https://v4-alpha.getbootstrap.com/layout/responsive-utilities/. Also with the help of utility CSS classes.

Here you can find the code for that: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_responsive-utilities.scss

Of course you could develop your own solution based on that. Especially if you don't need all of them to save some bytes.

How to remove/ignore :hover css style on touch devices

2020 Solution - CSS only - No Javascript

Use media hover with media pointer will help you resolve this issue. Tested on chrome Web and android mobile. I known this old question but I didn't find any solution like this.

@media (hover: hover) and (pointer: fine) {
  a:hover { color: red; }
}

<a href="#" >Some Link</a>

How to prevent sticky hover effects for buttons on touch devices

Since this part of CSS Media Queries Level 4 has now been widely implemented since 2018, you can use this:

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

Or in English: "If the browser supports proper/true/real/non-emulated hovering (e.g. has a mouse-like primary input device), then apply this style when buttons are hovered over."

For browsers that do not have this implemented (or didn't at the time of this original answer), I wrote a polyfill to deal with this. Using it, you can transform the above futuristic CSS into:

html.my-true-hover button:hover {
    background-color: blue;
}

(A variation on the .no-touch technique) And then using some client-side JavaScript from the same polyfill that detects support for hovering, you can toggle the presence of the my-true-hover class accordingly:

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

Is it possible to use trigger hover as a toggle for mobile?

You should modify your css to use a "hovered" class (In fact you can use any class you want):

.grid-sarah:hover, .grid-sarah.hovered{ /* Your CSS */ }

And modify your jquery to this:

$(function () {
     $('.grid-sarah').click(function () {
       $(this).toggleClass("hovered");
     });
});

Hover effect make weird behavior on mobile devices

Your guess is exactly right. Hover effects do not work correctly on mobile. When a user clicks on the element it quickly triggers the hover effect before taking them to the next link. Sometimes phones will cache that triggered the hover effect and make it always appear that way. Instead of hover effects, you would only want to use on-click effects for mobile. Maybe one day our phones will support this better.

---

Related Topics