Hover эффект на блок

Я знаю, что в моём коде ошибка, но я не могу её найти. Как можно сделать, чтобы "1" выводил один раз, когда мы навели на .wrapper ? И когда убирали курсор с блока в консоль выводилось только одни раз "2"
code : click

$('body').on('mousemove', function() {
    if($('.wrapper').is(':hover')) {
        console.log('1')
    } else {
        console.log('2')
    }
});

Ответы (1 шт):

Автор решения: Rudi

У тебя слушатель стоит на mousemove т.е. при движении мыши многократно срабатывает скрипт. Попробуй слушатель on mouseenter и on mouseleave

UPD: добавил вариант с hover

$(".wrapper").on({
    mouseenter: function () {
        console.log(1)
    }, 
    mouseleave: function () {
        console.log(2)
    }
});

// И второй вариант с hover

//$( ".wrapper" ).hover( handlerIn, handlerOut )
//function handlerIn(){
  //console.log(1)
//}
//function handlerOut(){
  //console.log(2)
//}
.wrapper{
width 100px;
height:80px;
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper'></div>

→ Ссылка