Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS :hover styling mimics :focus on touch devices. How to remove?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #264063
    grimski
    Participant

    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?

    #264167
    Shikkediel
    Participant

    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.

    https://patrickhlauke.github.io/touch/tests/results/

    #264973
    Shikkediel
    Participant

    Hey man, dunno if you’re still looking for a fix but Beverleyh posted this, adding an empty touchend event listener:

    blog.fofwebdesign.co.uk/sticky-hover-fix

    #264165
    Shikkediel
    Participant

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.