9951 explained code solutions for 126 technologies


jqueryHow do I use jQuery to create a hover effect?


Using jQuery to create a hover effect is a simple process. The following example code will create an effect that changes the background color of an element when a user hovers over it:

$('#element').hover(function(){
    $(this).css('background-color', '#000000');
}, function(){
    $(this).css('background-color', '#ffffff');
});

This code uses the hover() function, which takes two functions as parameters. The first function is called when the mouse enters the element, and the second function is called when the mouse leaves the element. In this example, the background color of the element is changed to black when the mouse enters, and to white when the mouse leaves.

Code explanation

  • $('#element'): This is a jQuery selector that selects the element with the ID element.
  • hover(): This is a jQuery function that takes two functions as parameters.
  • $(this): This is a jQuery selector that selects the current element.
  • css(): This is a jQuery function that sets the CSS of the selected element.

For more information on using jQuery to create a hover effect, please see the following links:

Edit this code on GitHub