Forums

Give help. Get help.

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

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

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

    # 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!
    http://www.codehaven.co.uk/fix-css-hover-on-iphone-ipad/

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

    # January 30, 2015 at 9:43 am

    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)">
    
Viewing 12 posts - 1 through 12 (of 12 total)

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

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag