1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5.00 out of 5)

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.

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

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/wp-content/uploads/2014/09/logo-web-design-and-develoopment.png') 
        {
            document.getElementById('imgClickAndChange').src = 'https://a1websitepro.com/wp-content/uploads/2012/09/web1-300x213.jpg';
        }
        else 
        {
            document.getElementById('imgClickAndChange').src = 'https://a1websitepro.com/wp-content/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.

Adding Hover Effect On Mobile Devices was last modified: October 31st, 2018 by Maximus Mccullough

Leave a Reply

Your email address will not be published. Required fields are marked *

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