Simple Little Tricks for Web Transition Touch Events on Mobile Devices

Est. Read Time: ~Less Than a Minute

If you want to have a web transition hover event to show on your website for mobile devices, you just need to attach this attribute:


There are multiple ways to do it, but this is a simple way.

If you didn’t want to edit single HTML links for the touch events you can use an event listener.

To do that you simply update your body tag in the HTML to this:

“<body ontouchstart=””>”

If you don’t want to edit your HTML or if you have a lot of pages that need that result you can add this script to your javascript file.


It can also be done with simple CSS “:active” tag appended to the specific element in your CSS file, but in some mobile operating versions it may not work.

Source References: Stackoverflow

About the Author:

Zedric Myers
Zedric Myers is a Web Designer for Beacon Technologies. After earning his degree in Advertising and Graphic Design, he spent 11 years with an advertising agency in Greensboro, NC where he was initially hired as a designer and transitioned to being a Web Developer.