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?x60528'  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.