How to find out if the mouse is over a certain part of an element using jQuery?

Question

I have a div element that is 980px wide and I'd like to be able to trigger an event if the mouse is in the last 100 pixels or so of the div (I want to slide it). I already know how to slide it, but I haven't been able to make something that tells me when the mouse is either in the first 100pixels so it scrolls left or after the 880 so it can go right. This is my markup:

<div class="menuProductosNav">
    <ul>
        <li><a href="computadoras.html"><img src="assets/img/menuProductos/producto0.png" alt="" /></a></li>
        <li><a href="consumibles.html"><img src="assets/img/menuProductos/producto11.png" alt="" /></a></li>
        <li><a href="impresoras.html"><img src="assets/img/menuProductos/producto2.png" alt="" /></a></li>
        <li><a href="apple.html"><img src="assets/img/menuProductos/producto1.png" alt="" /></a></li>
        <li><a href="productos.html"><img src="assets/img/menuProductos/producto3.png" alt="" /></a></li>
        <li><a href="redescomu.html"><img src="assets/img/menuProductos/producto4.png" alt="" /></a></li>
        <li><a href="proyecciones.html"><img src="assets/img/menuProductos/producto5.png" alt="" /></a></li>
        <li><a href="accesorios.html"><img src="assets/img/menuProductos/producto6.png" alt="" /></a></li>
        <li><a href="energia.html"><img src="assets/img/menuProductos/producto7.png" alt="" /></a></li>
        <li><a href="refacciones.html"><img src="assets/img/menuProductos/producto8.png" alt="" /></a></li>
        <li><a href="software.html"><img src="assets/img/menuProductos/producto9.png" alt="" /></a></li>
        <li><a href="pdv.html"><img src="assets/img/menuProductos/producto10.png" alt="" /></a></li>
    </ul>
</div>

I honestly am lost at this, could anyone let me know how to do this? all I can get is the element's width:

var $nav = $('.menuProductosNav');
$nav.bind('mouseover',function(){
 alert($nav.width());
});

Answer 1

Maybe you could try placing an element in that area, with absolute positioning, and detect mouse hover on that. Of course, the element would be a transparent div or such.

Another solution is using jQuery to detect the mouse position, compare that with the div position and trigger the slide. But this would be a little bit trickier.

It would be very helpful if you would have a demo of that somewhere...

Answer 2

Try this:

var $nav = $('.menuProductosNav');
var nav_width = $nav.width();
var THRESHOLD = 100;
$nav.bind('mouseover mousemove',function(e) {
    var offset = nav_width - (e.clientX - this.offsetLeft);
    console.log(offset);
    if(offset < THRESHOLD) {
      //mouse is within bounds...
      alert('within bounds');
    } 
});​

Working example: http://jsfiddle.net/XBnjJ/3/

Answer 3

Use the event in your function and the element offset.

Full description see:

http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html