Обнаруживать IF, зависающий над элементом с помощью jQuery

Ответ 1

Исходный (и правильный) ответ:

Вы можете использовать is() и проверить селектор :hover.

var isHovered = $('#elem').is(":hover"); // returns true or false

Пример: http://jsfiddle.net/Meligy/2kyaJ/3/

(Это работает только тогда, когда селектор соответствует элементу ONE max. См. раздел "Редактирование 3" )

.

Изменить 1 (29 июня 2013 г.): (применимо только к jQuery 1.9.x, поскольку оно работает с 1.10+, см. следующий Редактировать 2)

Этот ответ был лучшим решением во время ответа на вопрос. Этот селектор ": hover" был удален с помощью удаления метода .hover() в jQuery 1.9.x.

Интересно, что недавний ответ от "allicarn" показывает, что можно использовать :hover как селектор CSS (против Sizzle), когда вы префикс его селектором $($(this).selector + ":hover").length > 0, и, похоже, он работает!

Кроме того, hoverIntent плагин, упомянутый в другом ответе, тоже выглядит очень приятным.

Редактировать 2 (21 сентября 2013 г.): .is(":hover") работает

Основываясь на другом комментарии, я заметил, что оригинальный способ, который я опубликовал, .is(":hover"), на самом деле все еще работает в jQuery, поэтому.

• Он работал в jQuery 1.7.x.

• Он перестал работать в 1.9.1, когда кто-то сообщил об этом мне, и все мы думали, что это связано с jQuery, удаляющим псевдоним hover для обработки событий в этой версии.

• Он снова работал в jQuery 1.10.1 и 2.0.2 (возможно, 2.0.x), что говорит о том, что сбой в 1.9.x был ошибкой или, следовательно, не преднамеренным поведением, как мы думали в предыдущей точке.

Если вы хотите протестировать это в q конкретной версии jQuery, просто откройте пример JSFidlle в начале этого ответа, измените на желаемую версию jQuery и нажмите "Запустить". Если цвет меняется при наведении, он работает.

.

Редактировать 3 (9 марта 2014 г.): Он работает только тогда, когда последовательность jQuery содержит один элемент

Как показано @Wilmer в комментариях, у него есть скрипка, которая даже не работает против jQuery версий я и других, которые протестировали ее против. Когда я попытался выяснить, что особенного в его случае, я заметил, что он пытался проверять несколько элементов одновременно. Это метало Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover.

Итак, работая со своей скрипкой, это работает НЕ:

var isHovered = !!$('#up, #down').filter(":hover").length;

Пока этот DOES работает:

var isHovered = !!$('#up,#down').
                    filter(function() { return $(this).is(":hover"); }).length;

Он также работает с последовательностями jQuery, которые содержат один элемент, например, если исходный селектор соответствовал только одному элементу или вы вызывали .first() по результатам и т.д.

Это также ссылается на мой JavaScript + Web Dev Tips and Resources Newsletter.

Ответ 2

Использование:

var hovered = $("#parent").find("#element:hover").length;

jQuery 1.9 +

Ответ 3

В jQuery 1.9 он не работает. Сделал этот плагин на основе ответа user2444818.

jQuery.fn.mouseIsOver = function () {
    return $(this).parent().find($(this).selector + ":hover").length > 0;
}; 

http://jsfiddle.net/Wp2v4/1/

Ответ 4

Расширение ответа @Mohamed. Вы можете использовать небольшую инкапсуляцию

Вот так:

jQuery.fn.mouseIsOver = function () {
    if($(this[0]).is(":hover"))
    {
        return true;
    }
    return false;
}; 

Используйте его как:

$("#elem").mouseIsOver();//returns true or false

Спрятал скрипку: http://jsfiddle.net/cgWdF/1/

Ответ 5

Пара обновлений для добавления после работы над этой темой на некоторое время:

• все решения с .is( ": hover" ) break на jQuery 1.9.1
• Наиболее вероятная причина проверить, находится ли мышь по-прежнему над элементом, чтобы попытаться предотвратить срабатывание событий друг над другом. Например, у нас были проблемы с запуском и завершением мыши, прежде чем наше событие mouseenter даже завершилось. Конечно, это было связано с быстрым движением мыши.

Мы использовали hoverIntent https://github.com/briancherne/jquery-hoverIntent, чтобы решить проблему для нас. По сути, это срабатывает, если движение мыши более преднамеренное. (одна вещь, которую следует отметить, это то, что она будет запускаться на обеих мышах, введя элемент и выйдя - если вы хотите использовать только один проход конструктора пустую функцию)

Ответ 6

Установите флаг при наведении:

var over = false;
$('#elem').hover(function() {
  over = true;
},
function () {
  over = false;
});

Затем просто проверьте свой флаг.

Ответ 7

Вы можете отфильтровать свой элюмент со всех зависающих элементов. Проблемный код:

element.filter(':hover')

Сохранить код:

jQuery(':hover').filter(element)

Возврат boolean:

jQuery(':hover').filter(element).length===0

Ответ 8

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

$(window).on('load', function() {
    setTimeout(function() {
        $('img:hover').fadeOut().fadeIn();
    }, 500);
});

http://codepen.io/molokoloco/pen/Grvkx/

Ответ 9

Установка флага на кинакуту ответ кажется разумным, вы можете поместить слушателя на тело, чтобы вы могли проверить, не завис ли какой-либо элемент в определенный момент.

Однако, как вы хотите иметь дело с дочерними узлами? Возможно, вы должны проверить, является ли этот элемент предком текущего зависающего элемента.

<script>

var isOver = (function() {
  var overElement;
  return {

    // Set the "over" element
    set: function(e) {
      overElement = e.target || e.srcElement;
    },

    // Return the current "over" element
    get: function() {
      return overElement;    
    },

    // Check if element is the current "over" element
    check: function(element) {
      return element == overElement;
    },

    // Check if element is, or an ancestor of, the 
    // current "over" element
    checkAll: function(element) {
      while (overElement.parentNode) {
         if (element == overElement) return true;
         overElement = overElement.parentNode;
      }
      return false;
    }
  };
}());


// Check every second if p0 is being hovered over
window.setInterval( function() {
  var el = document.getElementById('p0');
  document.getElementById('msg').innerHTML = isOver.checkAll(el);
}, 1000);


</script>

<body onmouseover="isOver.set(event);">
  <div>Here is a div
    <p id="p0">Here is a p in the div<span> here is a span in the p</span> foo bar </p>
  </div>
  <div id="msg"></div>
</body>

Ответ 10

Принятый ответ не работал у меня на JQuery 2.x .is(":hover") возвращает false для каждого вызова.

Я закончил с довольно простым решением, которое работает:

function isHovered(selector) {

    return $(selector+":hover").length > 0

}