Add/Remove Class on Mouseover /Mouseout

To add the class on hover, jQuery addClass() will add a class from a specified elements and remove the class on mouseout, use the jQuery removeClass() method.

Using jQuery addClass() and removeClass, pass the class as the argument of the function. Add one or more classes to an selected HTML elements use the addClass() method. The class is to be added to the class attribute of each matched element. Hover on one element and add a class to another selected div element and mouseout removed the class from selected div elements.

 <script>
  $(document).ready(function () {
    $(".box").hover(
      function () {
        $(this).addClass("box-hover");
      },
      function () {
        $(this).removeClass("box-hover");
      }
    );
  });
</script>