Skip Navigation
Madison, Wisconsin
Powderkeg Web Design
May 27, 2016

Why Don't My Buttons Change Their Styles When I Click On Them In Mobile??!

Nick
Nick
Why Don't My Buttons Change Their Styles When I Click On Them In Mobile??!

If you’ve ever developed a website with mobile in mind, you have probably noticed that :hover, :focus, and :active states do not tend to fire when you use your finger to click them. I would wager a guess that nowadays that is to keep things more uniform for people that don’t develop with mobile in mind. If you love your :hover and :focus states and want the whole world, including mobile users, to see it – look no further!

There is a very simple “hack” that you can employ that makes the mobile browser start rendering the pseudo states again. All’s you need to do is add ontouchstart=”” to your body tag:

<body ontouchstart="">

This basically sets a listener for touch events and the browser will know to treat touches like a mouse click/hover. Enjoy!

Nick Kalscheur

Nick Kalscheur

Lead Developer