How to handle hover pseudo class for touch devices?

Hey fellow campers,
I have come across a problem with CSS hover pseudo-class, the element with hover applied would remain in hover state unless I touch somewhere else on the screen. My question is there a proper way to use hover for touch devices? Or should hover be used for touch devices?

Any Guidance about this would be of much help!
Thank you.

1 Like

I don’t think there is a proper way to use hover in touch devices because there’s no hover. I think some browsers emulates hover if you tap and hold for some time.

You cause @media (hover: hover) { and put all your hover’s there, only devices that has hover will use it, or you can override all your hovers in a @media (hover: none) {.

Example:

a:hover { color: red; }

@media (hover: none) {
    a:hover { color: inherit; }
}
1 Like

https://codepen.io/ridafatima15h1/pen/gBQLEV?editors=1100

Okay, so I tried what you mentioned in this pen. So it only applies the hover class for which the hover property is applicable.

Are there any alternatives for hover for touchscreens for styling purposes?

How do you imagine a ‘hover’ on touchscreen? If you mean ‘touch’, then the way to catch it in CSS might be :active and :hover together

1 Like

As far as I know there are no ways to surely detect touchscreen in CSS, therefore I wouldn’t suggest trying to select only ‘touch’ devices or otherwise, just assume everything is touchscreen and go from there

1 Like

Since there’s no hover on touchscreens I don’t think you should be styling “hover” on it. What you can do is to make sure every touchable element clearly appear as touchable.

You can read more tips on styling states here: https://material.io/design/interaction/states.html

1 Like

Thank you for explaining @snigo, I tried using active and hover together, it didn’t make any difference…So the right thing to do would be to just forget it for touch screens…as it is only for pointer/desktops

Thank you @ghukahr for your help. The link is quite helpful. I would surely look in detail into this.

Try resetting whatever :hover does with :active and make sure it’s after :hover in CSS. Should work!

Touch devices have an invisible pointer. Whenever you touch somewhere, the pointer is moved there, isn’t it? But when you release the screen (lift your finger, pen, whatever) the pointer is left wherever it was until a moment ago, so :hover will give you unexpected results if your paradigm is
touch = pointer on; release = pointer off.

1 Like

@ridafatima15h1, I finally had a look at the link you provided :slight_smile:
Try this:

<div class=“touch-hover-wrapper”>
  <input type="button" value="hover" class="btn1">
</div>
<input type="button" value="no-hover" class="btn2">

// in CSS, change .btn1:hover to this:
.touch-hover-wrapper:hover > .btn1:not(:focus)

I think it’s a bit easier to do comparing to media queries solution.
Hope this will help

1 Like

@Undigon that clearly explained the process to me Thankyou!:smile:

1 Like

@snigo Okay, so I added the code you mentioned to my pen. Here is the link.

What I don’t seem to understand is how this code is supposed to work. Sorry if this question is noobish
:sweat_smile: Actually I am new to this topic.

What I get is that the above statement should select all input element with class btn1 which do not have focus upon hovering on the div with class touch-hover-wrapper. I have added this in my code but this seems to work neither on desktop nor on the touch device. If I am doing something entirely wrong please point that out too.

It doesn’t work because you’re using not valid quotes I wrote :slight_smile:

<div class=“touch-hover-wrapper”> // incorrect
vs
<div class="touch-hover-wrapper"> // correct

Sorry for confusion

But then, my solution is appeared to be working on touch device simulation in the browser on Mac, doesn’t work on Chrome on iPhone, meaning @media (hover: hover) is the only correct solution when using CSS only.

I believe the proper way to handle and control it would be with Javascript, then you can both hover on the desktop and click animation on both touch + desktop.

1 Like

@snigo Thank you again :sweat_smile:. I corrected that in my code. I also added a little transition effect to the background.
I tried that in my chrome browser on mobile, Hover effects gets visible briefly just before the btn1 gains focus. If I long press the transition is a bit more visible. As It stays in focus once clicked, it needs o to be unfocused for the next click, here javascript might help. But you are right, cross-browser and cross platform compatibility would be the next problem.