Ошибка неподдерживаемого псевдо: наведите курсор на jQuery [duplicate]

Question

Ошибка неподдерживаемого псевдо: наведите курсор на jQuery [duplicate]

Использование функции reshape:

reshape(dat1, idvar = "name", timevar = "numbers", direction = "wide")

136

jquery

задан James Skidmore 24 January 2012 в 04:51

10 ответов

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

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

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

9

ответ дан allicarn 23 August 2018 в 01:08

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

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

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

3

ответ дан Donald A Nummer Jr 23 August 2018 в 01:08

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

Как это:

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

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

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

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

2

ответ дан gideon 23 August 2018 в 01:08

1

для этого вы также можете: jQuery.fn.mouseIsOver = function () {return $ (this [0]). is (': hover')}; меньше кода – Lathan 14 November 2012 в 19:30
2

как трудно просто сделать $ ('# elem'). is (': hover') – luckykrrish 7 January 2013 в 11:32
3

не трудно, но более четко выражено намерение. Но для каждого это собственное. – gideon 3 May 2016 в 16:46

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

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

function isHovered(selector) {

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

}

1

ответ дан gidim 23 August 2018 в 01:08

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

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

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

2

ответ дан kinakuta 23 August 2018 в 01:08

1

Простой, но не легко повторно используемый. : / – Trevor 24 January 2012 в 05:00
2

Кажется, я не работал в своей конкретной ситуации, но я согласен, что это хороший способ пойти иначе. В моем случае, когда я mouseleave один элемент, я хочу проверить, указала ли мышь другой конкретный элемент. – James Skidmore 24 January 2012 в 05:01
3

@JamesSkidmore - в событии mouseleave вы можете использовать e.fromElement и e.toElement. Будет ли это работать на вас? – mrtsherman 24 January 2012 в 05:03
4

Вы можете обновить это, чтобы использовать селектор, который охватывает все применимые элементы, и хранить флаг для отдельных элементов с помощью .data(). – nnnnnn 24 January 2012 в 05:03
5

@Trevor - true - вам нужно сохранить состояние в элементе, а затем создать функцию, которая проверяет (предположительно, тег данных) состояние элемента. – kinakuta 24 January 2012 в 05:04

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

element.filter(':hover')

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

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

Чтобы вернуть логическое значение:

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

3

ответ дан Mino 23 August 2018 в 01:08

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

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

http://codepen.io/molokoloco / ручка / Grvkx /

1

ответ дан Peter Mortensen 23 August 2018 в 01:08

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

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

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

0

ответ дан RobG 23 August 2018 в 01:08

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

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

jQuery 1.9 +

30

ответ дан user2444818 23 August 2018 в 01:08

1

Это прекрасно работает. Лучшее решение найдено при просмотре для замены функции .hover и: селектор hover. Спасибо! – Tyler 2 September 2013 в 23:24
2

Работает как шарм! :) – jroi_web 7 April 2015 в 08:15

Другие вопросы по тегам:

jquery

Похожие вопросы:

для этого вы также можете: jQuery.fn.mouseIsOver = function () {return $ (this [0]). is (': hover')}; меньше кода — Lathan, 14 November 2012 в 19:30
как трудно просто сделать $ ('# elem'). is (': hover') — luckykrrish, 7 January 2013 в 11:32
не трудно, но более четко выражено намерение. Но для каждого это собственное. — gideon, 3 May 2016 в 16:46
Простой, но не легко повторно используемый. : / — Trevor, 24 January 2012 в 05:00
Кажется, я не работал в своей конкретной ситуации, но я согласен, что это хороший способ пойти иначе. В моем случае, когда я mouseleave один элемент, я хочу проверить, указала ли мышь другой конкретный элемент. — James Skidmore, 24 January 2012 в 05:01
@JamesSkidmore - в событии mouseleave вы можете использовать e.fromElement и e.toElement. Будет ли это работать на вас? — mrtsherman, 24 January 2012 в 05:03
Вы можете обновить это, чтобы использовать селектор, который охватывает все применимые элементы, и хранить флаг для отдельных элементов с помощью .data(). — nnnnnn, 24 January 2012 в 05:03
@Trevor - true - вам нужно сохранить состояние в элементе, а затем создать функцию, которая проверяет (предположительно, тег данных) состояние элемента. — kinakuta, 24 January 2012 в 05:04
Это прекрасно работает. Лучшее решение найдено при просмотре для замены функции .hover и: селектор hover. Спасибо! — Tyler, 2 September 2013 в 23:24

score 279 · Accepted Answer

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

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

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

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

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

.

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

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

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

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

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

Основываясь на другом комментарии, я заметил, что исходный способ, который я опубликовал, .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 версий I и других, которые протестировали ее. Когда я попытался найти, что особенного в его случае, я заметил, что он пытался проверить несколько элементов за раз. Это метало Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: hover.

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

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

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

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

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

Это также упоминается в моей JavaScript + Web Dev Tips & amp; Ресурсный бюллетень .

Работает отлично, просто. Спасибо Мохамеду! — James Skidmore, 24 January 2012 в 05:05
Выдает ошибку в IE 8: Syntax Error, unrecognized expression: hover. jquery-1.7.js line 4179. — RobG, 24 January 2012 в 07:06
is(":hover"), похоже, снова работает в jQuery 2.0.2 ... — Ivo Renkema, 20 September 2013 в 08:39
@Meligy: я разветвил вашу скрипку, чтобы проиллюстрировать, что она не работает с несколькими элементами в выделенном файле: jsfiddle.net/p34n8 — SuperNova, 8 May 2014 в 12:23