Forums

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

Home Forums CSS Click function for :hover states on touch devices Reply To: Click function for :hover states on touch devices

#151950
Senff
Participant

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.