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.
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) {.
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
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: Material Design
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
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.
@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
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.
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.
@snigo Thank you again . 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.