The jQuery mousemove() method is an inbuilt method which is used when mouse pointer moves over the selected element.
Syntax:
$(selector).mousemove(function)
Parameters: This method accepts single parameter function which is optional. This parameter is used to specify the function to run when the mousemove event is call.
Below examples illustrates the mousemove() method in jQuery:
Example 1: This example illustrates the use of mousemove() method.
HTML
<!DOCTYPE html> <html> <head> <title>The mousemove Method</title> <script src= </script> <!-- jQuery code to show the working of this method --> <script> $(document).ready(function () { $("p").mousemove(function () { $("div").css("background-color", "lightgreen"); }); }); </script> <style> div { width: 380px; padding: 20px; height: 60px; border: 2px solid green; font-weight: bold; font-size: 20px; } </style> </head> <body> <div> <!-- move over this text to see the change --> <p>Move over this paragraph.</p> </div> </body> </html> |
Output:
Example 2: In this example, a pop-up will come out when we move the mouse over the paragraph.
HTML
<!DOCTYPE html> <html> <head> <title>The mousemove Method</title> <script src= </script> <!-- jQuery code to show the working of this method --> <script> $(document).ready(function () { $("p").mousemove(function () { alert("Mouse moved over this paragraph"); }); }); </script> <style> div { width: 380px; padding: 20px; height: 60px; border: 2px solid green; font-weight: bold; font-size: 20px; } </style> </head> <body> <div> <!-- move over this text and pop-up will come out --> <p>Move over this paragraph.</p> </div> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
