Mouseover/out only on one menu item within several caught by jQuery selector

Question

When I hover over a menu item everyone gets the mouseover/out effect. I wonder if which procedure/function to use when hovering the mouse in the menu apply the effect only on this menu item.

<div id="grid-container">

    <div class="grid-item"></div>

    <div class="grid-item"></div>

    <div class="grid-item"></div>

    <div class="grid-item"></div>

</div>

<script>

    var grid_item = $('.grid-item').ea;

    $(document).ready(() => {

        // Adicionando o evento com mouseover.
        grid_item.mouseover( () => {
            grid_item.addClass('item-hover');
        });

        // Removendo o evento com mouseout.
        grid_item.mouseout( () => {
            grid_item.removeClass('item-hover');
        });

    });

</script>

Answer 1

jQuery has its own method of calling two events at the same time, the .Hover:

$(elemento).hover(
   function(){
      // função do mouseenter (quando passa o mouse)
   },
   function(){
      // função do mouseleave (quando retira o mouse)
   }
);

Example adding the class:

$(".grid-item").hover(
   function(){
      $(this).addClass("item-hover");
   },
   function(){
      $(this).removeClass("item-hover");
   }
);

.item-hover{
   color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid-container">

    <div class="grid-item">item 1</div>

    <div class="grid-item">item 2</div>

    <div class="grid-item">item 3</div>

    <div class="grid-item">item 4</div>

</div>