Post
Ask Question

Show Another Image On Hover Using JQuery

Introduction 

 
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.
 
Example
 
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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>  
  6. <script>  
  7. $(document).ready(function(){  
  8.   $(".image").hover(function(){  
  9.     $(this).attr('src','https://jpeg.org/images/jpeg-home.jpg');  
  10.     }, function(){  
  11.     $(this).attr('src','https://jpeg.org/images/jpegsystems-home.jpg');  
  12.   });  
  13. });  
  14. </script>  
  15. </head>  
  16. <body>  
  17. <img class="image" src="https://jpeg.org/images/jpegsystems-home.jpg"></img>  
  18. </body>  
  19. </html>  
Description 
 
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.
 
Summary 
 
In this blog, I discussed how we can use jQuery hover function. I hope it was useful for you.