1 Star2 Stars3 Stars4 Stars5 Stars (7 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

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂

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/wp-content/uploads/2014/09/logo-web-design-and-develoopment.png?x40404'  id='imgClickAndChange' onclick='changeImage()'  />

Add The JavaScript *

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

Subscribe To My YouTube Channel:
<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: November 26th, 2018 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:

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.