호버(hover) 할 때 jquery 이벤트 감지 방법

<style>

  .con-group { display: flex; align-items: center; justify-content: space-around;} 

  .con-item { width: 100%; display: flex; flex-direction: column; color: #fff; font-size: 24px; cursor: pointer; transition: all .5s; margin: 0 10px; padding: 20px 0px 20px 40px; box-sizing: border-box; } 

  .con-item.active { background: #fff; border-radius: 10px; color: #002DAC; } 

  .con-item:hover { background: #fff; border-radius: 10px; color: #002DAC; }

</style>

<div class="con-group">

  <div class="con-item active">

    <span>1</span>

  </div>

  <div class="con-item">

    <span>2</span>

  </div>

  <div class="con-item">

    <span>3</span>

  </div>

</div>

<script>

  $(document).ready(function() {




    $('.con-item').hover(function() {




      $('.con-item:nth-child(1)').removeClass('active');




    },

    function() {




      $('.con-item:nth-child(1)').addClass('active');




    });

  });

</script>