Как узнать, находится ли мышь над определенной частью элемента, используя jQuery?

Question

У меня есть элемент div шириной 980 пикселей, и я хотел бы иметь возможность инициировать событие, если мышь находится в последних 100 пикселях или около того элемента div (я хочу его сдвинуть).Я уже знаю, как его сдвинуть, но я не смог сделать что-то, что сообщало бы мне, когда мышь находится в первых 100 пикселях, чтобы она прокручивалась влево или после 880, чтобы она могла идти направо.Это моя разметка:

<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>

Честно говоря, я заблудился, кто-нибудь может дать мне знать, как это сделать?все, что я могу получить, это ширина элемента:

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

Answer 1

Попробуйте это:

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');
    } 
});​

Рабочий пример: http://jsfiddle.net/XBnjJ/3/

Answer 2

Используйте событие в вашей функции и смещение элемента.

Полное описание см .:

http://jquery -howto.blogspot.com / 2009/07 / определение местоположения-mouse-позиционно-in.html

Answer 3

Может быть, вы могли бы попытаться поместить элемент в эту область с абсолютным позиционированием и обнаружить наведение мыши на этом месте. Конечно, элемент будет прозрачным div или чем-то подобным.

Другим решением является использование jQuery для определения положения мыши, сравнения его с положением div и запуска слайда. Но это было бы немного сложнее.

Было бы очень полезно, если бы у вас где-нибудь была демонстрация этого ...