Mouseenter и mouseleave без событий

Question

Я новичок в Jquery и Javascript, только начал изучать около месяца назад, и я должен сказать, что я действительно впечатлен всем, что вы можете с этим сделать !!У меня есть этот кусок кода, над которым я работал, но я не могу заставить его работать должным образом, поэтому я решил спросить некоторых из более опытных здесь.Вот в чем дело: я пытаюсь повторить события mouseenter и mouseleave, найденные в Jquery.Мне удалось заставить работать первое событие, но я не могу правильно понять второе.Предполагается, что цвет div меняется, когда курсор переходит в красный div в синий и снова возвращается в красный при выходе.Вот код:

Стиль элемента div:

#offsetElement{width: 100px; height: 100px; position: absolute; background: red; top: 100px; left: 100px;}

Код Jquery

$(document).mousemove(function(e){
offset = $("#offsetElement").offset(),
offWidth = $("#offsetElement").width(),
offHeight = $("#offsetElement").height(),
offX = e.pageX - offset.left ,
offY = e.pageY - offset.top ;

if ((offX > 0) && (offX > offWidth)){
    return;
}   
else if ((offY > 0) && (offY > offHeight)){
    return;
}
else if ((offX < 0) && (offY > -offHeight)){
    return;
}   
else if ((offY < 0) && (offX > -offWidth)){
    return;
}   

$("#offsetElement").css("background","blue");

});

Элемент div:

<div id="offsetElement"></div>

Answer 1

Вы можете просто использовать CSS. Все очень просто:

#offsetElement {
  width: 100px; 
  height: 100px; 
  position: absolute; 
  background-color: red; 
  top: 100px; 
  left: 100px;
}

#offsetElement:hover {
  background-color:blue;
}