- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I have a very simple accordion, when a panel title is clicked a class of .open
is added to it so the text colour an a plus/minus icon can be changed. This works great in the browser but there is a problem on touch devices.
The :hover
style is the same as the .open
styling. When you click a title to close the panel, the .open
class is removed and the styling that goes with it should be removed. However, because :hover
is almost treated like :focus
the styling remains until you click elsewhere on the screen. Has anyone else experienced this and found a solution for it?
Below is a CodePen showing the issue and if you use Chrome, Browser Tools will allow you to see the same issue if you change the device options to an iPhone/Nexus (for example).
https://codepen.io/moy/pen/aENWXz
Any ideas? I’m guessing this could be a Javascript/jQuery issue or can it be solved with CSS?
It the issue still there? I can’t reproduce it…
But I’ve seen similar before and could then only conclude to not use :hover
at all, or replace them with JS mouse events. It’s not something that can be prevented altogether in a simply way, I believe. The emulation of the mouse-over
with a touchstart
happens very early in the chain.
Hey man, dunno if you’re still looking for a fix but Beverleyh posted this, adding an empty touchend
event listener:
It the issue still there? I can’t reproduce it…
But I’ve seen similar before and could then only conclude to not use :hover
at all, or replace them with JS mouse events. It’s not something that can be prevented altogether in a simply way, I believe. The emulation of the mouseover
with a touchstart
happens very early in the chain.