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.

 

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

 

Thanks for the suggestion. I tried the codes but didn't get it to work. Is there a js library I need to link?

 

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