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.

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.

<img alt='' src='https://a1websitepro.com/uploads/2014/09/logo-web-design-and-develoopment.png'  id='imgClickAndChange' onclick='changeImage()'  />

Add The JavaScript

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

<script language='javascript'>
    function changeImage() {
        if (document.getElementById('imgClickAndChange').src == 'https://a1websitepro.com/uploads/2014/09/logo-web-design-and-develoopment.png') 
        {
            document.getElementById('imgClickAndChange').src = 'https://a1websitepro.com/uploads/2012/09/web1-300x213.jpg';
        }
        else 
        {
            document.getElementById('imgClickAndChange').src = 'https://a1websitepro.com/uploads/2014/09/logo-web-design-and-develoopment.png';
        }
    }
</script>

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.