Good day all, I am tasked with building a slider for our site. Here is my goal:

<div id="abc">
  <div id="slider">...</div>
</div>

I need to move "slider" left 30px at a time when a button is hovered over, and right 30px when another button is hovered over.

My problem is that there doesn't seem to be a reliable method for telling the code that the mouse hasn't left the are in question, unless there is something I did not think about or read yet. In other words, when the mouse is OVER the a button, the code to move "slider" left is executed until the mouseout is called. I'm not really sure how to do this.

The only way I can think of is to look at the offsetTop and offsetLeft and offsetTop DOM properties and compare them to the mouse position, than run checks to see if the mouse is within the bounds of the box, and if not than it will stop the execution of code.

Is there a better way to do this?