Today I'll write a very simple and short post about a very simple function that you can use to retrieve in which half (left/right) of an element the mouse is moving towards. The function is written in vanilla javascript, no frameworks are involved.

Given the element which captures the event and the event itself the function return the string 'left' or 'right' depending on the cursor position over the element.

/*
 * Gets the mouseovered half of an element
 * @param {Element} element: the element which captures the event
 * @param {Event} evt: the event object
 * @return the mouseovered half ('left' | 'right')
 */
var getMousemoveHalf = function(element, evt) {
  var element_coords = element.getBoundingClientRect(),
      pointer_coords = {x: evt.clientX, y: evt.clientY};
      // only gecko sets the widh property
      return pointer_coords.x < (element_coords.left + (element_coords.right - element_coords.left) / 2) ? 'left' : 'right';
}

All the magic is done by the getBoundingClientRect function, which has a good browser compatibility.