Adding Hover Effect On Mobile Devices

Have you ever tried to add a hover effect for mobile devices? Well the truth of the matter is that you cannot do it. Hover effects require you to have a mouse that you can use to hover over an element. This is not the case with touch screens. Some people do work around with :focus and :touch however the solution here is based up JavaScript. I think it works well for mobile devices.

hover affect not available on mobile device

Adding Hover Effect On Mobile Devices

Set up your html inside the body tag with p tags as well as img tags. Notice I gave it a class of imgClickAndChange and I also added a JavaScript functions called changeImage.

[code]<img alt=” src=’https://a1websitepro.com/wp-content/uploads/2014/09/logo-web-design-and-develoopment.png’ id=’imgClickAndChange’ onclick=’changeImage()’ />[/code]

Only cool people share!

Add The JavaScript

Next you will want to add the JavaScript to the code.

[code]<script language=’javascript’>
function changeImage() {
if (document.getElementById(‘imgClickAndChange’).src == ‘https://a1websitepro.com/wp-content/uploads/2014/09/logo-web-design-and-develoopment.png’)
{
document.getElementById(‘imgClickAndChange’).src = ‘https://a1websitepro.com/wp-content/uploads/2012/09/web1-300×213.jpg’;
}
else
{
document.getElementById(‘imgClickAndChange’).src = ‘https://a1websitepro.com/wp-content/uploads/2014/09/logo-web-design-and-develoopment.png’;
}
}
</script>[/code]

Hover Effect for Desktop and Mobile WordPress Plugin

I wrote a plugin for a client that shows a hover effect on the desktop side and a click and change images on the mobile side. You can see it in action here.

Purchase Hover Plugin

You can purchase the hover plugin for WordPress here.

Adding Hover Effect On Mobile Devices was last modified: July 21st, 2022 by Maximus Mccullough

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.