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:
|
1 |
<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
Lead Developer
Nick is an ambitious and versatile developer with a wide range of talents. He is an efficient coder that utilizes his resources in order to achieve both his and the clients’ goals. His Alma Mater is the University of Wisconsin – Stevens Point where he graduated with honors in Web and Digital Media Development.
