Get a free trial // Grow your CSS skills // Land your dream job

Click function for :hover states on touch devices

  • # January 15, 2013 at 7:55 pm

    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.


    # January 15, 2013 at 9:52 pm

    just add support for `:focus` too

    # January 15, 2013 at 9:58 pm

    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.

    # January 15, 2013 at 10:51 pm

    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

    # January 16, 2013 at 12:56 am

    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)

    # January 16, 2013 at 1:30 am

    .panel:hover, .panel:focus {
    left: 200px;

    Don’t go changing it, just add `:focus` so it responds to a touch..

    Or use Javascript

    **Sidenote**: You should be using the `:focus` pseudo class anytime you’re using `:hover`’s just good practice. Throw `:active` in too, for IE7

    # January 16, 2013 at 5:50 am


    Awesome. Thanks for the resource.

    # September 27, 2013 at 6:19 am

    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??

    # September 29, 2013 at 5:08 am

    thanks for the link ChrisP, never thought about it.

    # October 3, 2013 at 6:58 am

    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>

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

    .menu:hover .extra {

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

    .menu:hover .extra, 
    .menu:focus .extra {

    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:

    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.

    # October 28, 2013 at 6:22 am

    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.

    # July 2, 2014 at 9:13 pm

    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}
    # August 6, 2014 at 5:41 am

    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!

    # September 29, 2014 at 9:25 pm

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

    # September 30, 2014 at 12:39 pm

    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?

Viewing 15 posts - 1 through 15 (of 16 total)

The topic ‘Click function for :hover states on touch devices’ is closed to new replies.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed