JavaScript hover on tap/touch solution for mobile/smart phones

A hover on touch solution by using JavaScript

The hover effect occurs as you bring the mouse over different elements in a web page like links, images, a paragraph or div element etc.

However, with the more and more increase of mobile / smart phone visitors, the hover effect does not work with the tap. So, your hard work does not pay off that you did by using the CSS for different elements.

For example, changing the colors of links as a user brings the mouse over it if your website is viewed in desktops. Ideally, you would want your users experiencing the similar stuff in mobiles or smart devices as in desktop.

The hover-on-touch is a JavaScript plug-in that enables alternative hover function in smaller screens. On Taphold, it displays the secondary information while on Tap, it goes to the link.

A few demos by way of graphics

The following graphics give an idea how this hover on touch plug-in works on mobile devices. These are just images while you can see live demos in the following section (that you may run on mobile phones).

Graphic 1:

JavaScript hover on touch

Graphic 2:

JavaScript hover on touch2

A simple demo of the hover to touch function

You need to run these demos in smart phones with tap feature in order to have a right taste. In this demo, a few div simple elements are created. As you tap on these div elements, it will change the color and go the target URLs.

See online demo and code

The markup of this demo:

 

 

Before the body closing tag, you need to include the hoverontouch.js file and hammer.min.js. The hammer.min.js must be included before the hoverontouch.js file.

 <script src=”http://hammerjs.github.io/dist/hammer.min.js”></script>

<script src=”js/hoverontouch/hoverontouch.js”></script>

A more real demo of hover for touch function

If you try running this demo on a desktop, it will not run. You must run this in a mobile simulator or an actual smartphone.

See online demo and code

The markup for this example:

 

 

You may get the complete code from the demo page.

Credit and plug-in download link: vin-ni