JQuery: мышь все еще над элементом?

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

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

Как я могу достичь # 2?

Спасибо.

Ответы

Ответ 1

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

Ответ 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'));

});

Ответ 3

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

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

Ответ 4

Здесь один из способов:

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

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

Ответ 5

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

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

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

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

Ответ 6

Я использовал гиперссылку, чтобы показать div, а затем в hover событие, которое я установил для этого свойства таймаута, и как только я перейду к моему div, я очищу тайм-аут и начну использовать div 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>