May 27, 2016
Why Don't My Buttons Change Their Styles When I Click On Them In Mobile??!
Nick
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!
