1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Disable hover state for touch devices

Discussion in 'HTML & Website Design' started by Robert Norgren, Feb 25, 2017.

  1. #1
    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.
    SEMrush
     
    Robert Norgren, Feb 25, 2017 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Unfortunately, there is no reliable CSS-solution for that - you will need to use some form of javascript - modernizr might do the job for you, perhaps. (I might be mistaken, but I'm fairly sure there is no sure way to not render :hover-events - you can try overriding the :hover with :focus, and see if you can subdue the hover-event that way on touch-screens, just be aware that that will mess it up for keyboard-navigators as well).
     
    PoPSiCLe, Feb 26, 2017 IP
  3. Robert Norgren

    Robert Norgren Peon

    Messages:
    5
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks for the suggestion. I tried the codes but didn't get it to work. Is there a js library I need to link?
     
    Robert Norgren, Mar 5, 2017 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,106
    Likes Received:
    1,691
    Best Answers:
    239
    Trophy Points:
    515
    #4
    It's touch -- you wouldn't have anything to TRIGGER hover states... so the question doesn't even make sense... Though if the intention is to not have them tappable, why are they anchors? THAT makes even LESS sense.

    If it's set to :hover then touch isn't going to trigger that. PERIOD. If they aren't supposed to be tappable -- and therefore mouse clickable, they shouldn't be anchors with href. It's that simple.

    Though really the whole thing is a disaster with figure tags when you do not have mathematical or scientific figures, massive amounts of whitespace for **** only knows what making it effectively useless as a 'design', endless pointless jQuery rubbish for Christmas only knows what (since I see nothing on the page that should even warrant the PRESENCE of JavaScript), no media targets on your stylesheets, fixed positioned crap using up screen space that would be better leveraged to show content, paragraphs around non-paragraph content, target attributes shoving new windows down users throats pissing on normal navigation and accessibility, invalid width attribute values, broken viewport meta that prevents zooming out, overstuffed keywords meta GUARANTEED to get it at BEST ignored by search, worst case get the entire site slapped down for abuse, etc, etc, etc....

    It's always disturbing when someone comes looking for help on a site like this where despite the small size, at least a third of the HTML belongs on the trash heap thanks to "hurr durr, semantics, what's that?" -- much less jQuery slopped all over it for **** only knows what. Certainly nothing useful...
     
    deathshadow, Mar 5, 2017 IP