Sometimes, we want to use the hover and class selector with jQuery.

In this article, we’ll look at how to use the hover and class selector with jQuery.

How to use the hover and class selector with jQuery?

To use the hover and class selector with jQuery, we can call the hover method.

For instance, we write:

<div id="menu">
  <div class="menuItem"><a href=#>Bla</a></div>
  <div class="menuItem"><a href=#>Bla</a></div>
  <div class="menuItem"><a href=#>Bla</a></div>
</div>

to add some elements.

Then we write:

  $('.menuItem').hover(function() {
      $(this).css('background-color', 'yellow');
    },
    function() {
      $(this).css('background-color', 'white');
    });

to select the elements with class menuItem and call hover on them to do something on hover in and out respectively.

When we hover into the element, we set the background color to yellow with css.

When we hover out of the element, we set the background color to white with css.

Conclusion

To use the hover and class selector with jQuery, we can call the hover method.