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.

    **Sample:**

    https://tinker.io/f81ee

    # 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)

    https://tinker.io/f81ee/1

    # 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` anyway..it’s just good practice. Throw `:active` in too, for IE7

    http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also_use_focus/

    # January 16, 2013 at 5:50 am

    @Chrisp

    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>
    </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.

    # 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.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".