jQuery:мышь все еще находится над элементом?

Question

Я хотел бы иметь возможность определить, находится ли мышь над элементом в следующем сценарии:

1. Если навести курсор мыши, то спать несколько секунд.
2. После завершения проверки мыши все еще находится над тем же элементом.
3. Если это правда, то сделайте что-нибудь.

Как мне достичь №2?

Спасибо.

Answer 1

Взгляните на hoverIntent плагин для jQuery.Он дает вам новый обработчик событий, который сработает, только если вы наводите курсор на элемент в течение определенного времени.Настраивая его параметры, вы сможете заставить его делать именно то, что вы хотите.

Answer 2

Кажется это работает(http://jsbin.com/uvoqe)

$("#hello").hover( function () {
  $(this).data('timeout', setTimeout( function () {

    alert('You have been hovering this element for 1000ms');

  }, 1000));
}, function () {

  clearTimeout($(this).data('timeout'));

});

Answer 3

Просто используйте флаг, чтобы узнать, находится ли над ним указатель мыши.

var mouseover = false;
$('.thing').mouseenter(function(){
    mouseover = true;
}).mouseleave(function(){
    mouseover = false;
});

Answer 4

Вот один из способов:

Когда вы установите .hover() на элементе вы можете передать ему 2 функции.Первый срабатывает, когда мышь находится над элементом, второй срабатывает, когда мышь уходит.

Первая функция может установить currentElementId (или какой-либо другой флаг), и вторая функция очистит это.Таким образом, единственное, что вам нужно сделать, это проверить, currentElementId пусто.

Answer 5

Вы можете использовать setTimeout( 'sleep', sleep_time ) для вызова функции через заданное время.

Назначьте обработчики событий onmouseover и onmouseout.

Эти обработчики изменяют флаг, чтобы проверить, находится ли мышь на элементе.

Внутри функции сна вы можете проверить флаг и просто вернуть его.

Answer 6

Я использовал гиперссылку, чтобы показать divа затем дальше hover событие, я устанавливаю для него свойство тайм-аута, и как только я перехожу к своему div Я очищаю тайм-аут и начинаю использовать div's hover функция затемнения div.Я надеюсь, что это поможет вам.

<script type="text/javascript">
    $(document).ready(function () {
        var obj;
        $("a").hover(function () {
            if ($("#div1").is(":hidden")) {
                $("#div1").fadeIn(300).show();
            }
        }, function () {
            obj = setTimeout("jQuery('#div1').fadeOut(300);", 300);
        });

        $("#div1").hover(function () {
            clearTimeout(obj);
            if ($("#div1").is(":hidden")) {

                $("#div1").show();
            }
        }, function () {
            jQuery('#div1').fadeOut(300);
        });
    });
</script>