Curious if anyone can suggest a method for adding a pure css "click" function for the code sample below. The example consists of a slide out panel activated on :hover. It works fine on desktop browsers, but fails to function on iOS touch devices… resulting from the lack of :hover support. ANy guidance is much appreciated. Thank You.
Yeah, using :focus whenever you use :hover, as @ChrisP said, will work. I would consider removing the hover interaction and replacing it with a click though. Not only will that work on all devices, but it also guarantees intention.
i don't think that would look good on mobile. your not meant to hover on a touchscreen device. But if you still want the animation to happen change it to :active
@jarolin Changing :hover to :active provides a partial solution, but the animation returns to the original state (closed) if the user release the mouse click.
Hello everyone,
Curious if anyone can suggest a method for adding a pure css "click" function for the code sample below. The example consists of a slide out panel activated on :hover. It works fine on desktop browsers, but fails to function on iOS touch devices… resulting from the lack of :hover support. ANy guidance is much appreciated. Thank You.
Sample: https://tinker.io/f81ee
just add support for
:focustooYeah, using
:focuswhenever you use:hover, as @ChrisP said, will work. I would consider removing the hover interaction and replacing it with a click though. Not only will that work on all devices, but it also guarantees intention.i don't think that would look good on mobile. your not meant to hover on a touchscreen device. But if you still want the animation to happen change it to :active
Thanks for the replies.
@chrisp @joshuanhibbert How exactly would I go about doing that?
@jarolin Changing :hover to :active provides a partial solution, but the animation returns to the original state (closed) if the user release the mouse click.
Perhaps there's not a full-proof solution here.
Updated Sample (using :active) https://tinker.io/f81ee/1
Don't go changing it, just add
:focusso it responds to a touch..Or use Javascript
Sidenote: You should be using the
:focuspseudo class anytime you're using:hoveranyway..it's just good practice. Throw:activein too, for IE7http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also_use_focus/
@Chrisp
Awesome. Thanks for the resource.