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.
[code]<img alt=” src=’https://a1websitepro.com/wp-content/uploads/2014/09/logo-web-design-and-develoopment.png’ id=’imgClickAndChange’ onclick=’changeImage()’ />[/code]
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.
![](https://a1websitepro.com/wp-content/uploads/2018/10/hover.gif)
A1WEBSITEPRO Social Media Pages
Here are my social media pages, lets hook up!