Click function for :hover states on touch devices

[Rugg]

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

[ChrisP]

just add support for :focus too

[Anonymous]

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

[mato75]

I am using twitter bootstrap. Hover effect is on buttons and hyperlinks. I want to remove it, after touchend event is triggered or by any other means possible.

adding focus does not fix the problem in my case, what can I do??

[SAiNT]

thanks for the link ChrisP, never thought about it.

[Senff]

REHASHING! Cause I can’t get it to work. :)

<div class="menu">
  <div class="title">This is a title, hover me!</div>
  <div class="extra">THIS IS EXTRA STUFF</div>
</div>

So .extra is hidden by default. When you hover on .menu, the .extra div should appear:

.menu:hover .extra {
  display:block;
}

That works on desktop. But not on mobile, so I’ve added :focus:

.menu:hover .extra, 
.menu:focus .extra {
  display:block;
}

Unfortunately, it still doesn’t work when I tap it on a touch device (iPhone 5 with iOS6, either Safari or Chrome). Try it out: http://codepen.io/senff/pen/KBlyo

So what am I missing here…..?

EDIT: OK something I didn’t know is that on iOS, you can only apply :hover on a LINK. I knew this was the case in older IE versions, but never knew it also applied to iOS.

[Jelmer]

EDIT: OK something I didn’t know is that on iOS, you can only apply :hover on a LINK. I knew this was the case in older IE versions, but never knew it also applied to iOS.

Do you have a source for this? This is actually very important info, I wonder why this isn’t very known amongst developers.

[ross.alcazar]

Hi guys im new to css tricks but i found a way to fix this one

do this on my mediaquery code.

 menu { cursor: pointer }

any tags will activate :hover touch event on iphone

you’ll also notice when you tap outside it doesnt close the menu unless you tap a link.

so i use this. {media query}

body {cursor: pointer}

[mikeys4u]

Just add
onclick=”” to anything that you want iphone – Ipad to show hover state to…..!

(div onclick=””) Click Me! (/div)

See here as brackets made code disappear!
http://www.codehaven.co.uk/fix-css-hover-on-iphone-ipad/

[Maverik]

Adding onclick=”” will fail the CSD. so not an option.

[mikeys4u]

There are 173 acronyms for CSD. So please explain!
And I have had this in place on 2 websites for 1 year plus….and its working so far!

Is there a better way?

[shanecarmody]

I tested @mikeys4u solution on the iPad Air — it works. I found a similar solution [here] but with a minor difference — void(0) is used instead of leaving the onclick attribute empty e.g.

<div class="image-container" onclick="void(0)">

[Author]

Posts