Mouseenter and mouseleave without events

Question

I'm new to jQuery and Javascript, just started learning about a month ago, and I have to say that I am really impressed with everything you can do with it! I have this piece of code on which I worked, but I cannot get it to function properly, so I decided to ask some of the more experienced over here. This is the thing: I'm trying to replicate the mouseenter and mouseleave events found in jQuery. I managed to get the first event working but I cannot get the second one right. The div color is supposed to change when the cursor enters the red div to blue and change back to red once again when it exits. Here is the code:

The style of the div element:

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

The Jquery code

$(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");
  
});

The div element:

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

Why won't you use the JQuery methods already tested to work cross-browser? — js1568

js1568 js1568 · Accepted Answer · 2011-06-17T19:25:09

You could just use CSS. It's very simple:

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

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

Mouseenter and mouseleave without events

1 Answers