Announcement

Collapse
No announcement yet.

Disable hover state for touch devices

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Disable hover state for touch devices

    Hi all!

    I've been working a little on my portfolio site http://www.robertnorgren.com/

    Is there a media query to target all touch devices and disable the hover effect when tapped? Currently, if you scroll down the site, the thumbnails gets the hover state even though the intention is not to tap them.

    ​Any ideas? Much appreciated.
    Hey there, I'm Robert... http://www.robertnorgren.com/

  • #2
    Hi Robert! Your site looks nice! As far as using CSS to detect whether or not it's on a touch device... there are two ways... what you're probably looking for is this: the 'pointer' media query. It's used to detect what type of pointer is being used to select elements on the screen. If it's set to 'fine' it will execute the css when being selected with something like a mouse (a fairly precise way to point). If pointer is set to 'course' it will run the css block if being selected with a finger (not as much precision there). The only drawback is that this is using CSS4, so some older browsers wouldn't be able to run it. Luckily though, your problem is only on mobile devices (which most of should be able to run CSS4). So you could use something like this...

    /* If something like a mouse is used as the selector */
    media (pointer:fine) {
    #gallery a:hover {
    opacity: 0.1;
    }
    }

    In the case that the browser couldn't run css4, you could add something like this as a fallback...


    media (min-width: 700px) {
    #gallery a:hover {
    opacity: 0.1;
    }
    }


    ...which would only do the hover thing if on a screen size larger than 700px.

    One more thing though, it seems that the scrolling is a bit sensitive to use. A small swipe goes a loooong way I'm not sure if that's intentional or not, but it could be a UX issue by making it hard to land on the thumbnail the user intended to see. Just something to look at. But overall, nice work!

    Comment


    • #3
      Hi Ds!gnr and welcome to GDF.

      We ask all new members to read very important links here and here. These explain the rules, how the forum runs and a few inside jokes. No, you haven't done anything wrong, we ask every new member to read them. Your first few posts will be moderated, so don't panic if they don't show up immediately. Enjoy your stay.
      Shop smart. Shop S-Mart.

      Comment

      Search

      Collapse

      Sponsor

      Collapse

      Incredible Stock

      Latest Topics

      Collapse

      GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
      Working...
      X