Show Another Image On Hover Using JQuery


Hover is used to display an item when a user hovers over an item in a Web page. The item can be any element such as a label, text box, image, color and so on.
In this jQuery code below, let's see how to change the current image to another image when you hover over an image. 
The hover function is used to get the hover event. On the hover event, we can load image attribute to a new image that we want to load on hover.
In the following simple example, I write the event function and change the src of the image to a new image. You need to make sure to import jQuery JS.
  1. <html>  
  2. <head>  
  3. <style>  
  4. </style>  
  5. <script src=""></script>  
  6. <script>  
  7. $(document).ready(function(){  
  8.   $(".image").hover(function(){  
  9.     $(this).attr('src','');  
  10.     }, function(){  
  11.     $(this).attr('src','');  
  12.   });  
  13. });  
  14. </script>  
  15. </head>  
  16. <body>  
  17. <img class="image" src=""></img>  
  18. </body>  
  19. </html>  
In the above example, a web page is loaded and an image is displayed. When the user hovers on that image, he/she will see another image. In the above example, I've used ".hovers () " query function for hover operation.
In this blog, I discussed how we can use jQuery hover function. I hope it was useful for you.