Есть ли быстрый и простой способ сделать это в jQuery, который мне не хватает?
Я не хочу использовать событие mouseover, потому что я уже использую его для чего-то другого. Мне просто нужно знать, находится ли мышь над элементом в данный момент.
Я хотел бы сделать что-то вроде этого, если бы только была функция "IsMouseOver":
function hideTip(oi) {
setTimeout(function() { if (!IsMouseOver(oi)) $(oi).fadeOut(); }, 100);
}
Ответы:
Установите тайм-аут на mouseout для исчезновения и сохраните возвращаемое значение для данных в объекте. Затем onmouseover отмените тайм-аут, если в данных есть значение.
Удалить данные по обратному вызову затухания.
На самом деле дешевле использовать mouseenter / mouseleave, потому что они не запускаются для меню, когда стреляют mouseover / mouseout детей.
источник
Этот код иллюстрирует то, что счастливое время Гарри и я пытаемся сказать. Когда мышь входит, появляется всплывающая подсказка, когда мышь уходит, она устанавливает задержку для ее исчезновения. Если мышь входит в тот же элемент до срабатывания задержки, то мы уничтожаем триггер, прежде чем он сработает, используя данные, которые мы сохранили ранее.
источник
Чистая и элегантная проверка при наведении:
источник
ВНИМАНИЕ:
is(':hover')
не рекомендуется в jquery 1.8+. Смотрите этот пост для решения.Вы также можете использовать этот ответ: https://stackoverflow.com/a/6035278/8843, чтобы проверить, находится ли мышь над элементом:
источник
:hover
недопустимый селектор jQuery: api.jquery.com/category/selectors (источник: bugs.jquery.com/ticket/11574 )document.querySelectorAll(':hover')
Вы можете использовать
hover
событие jQuery для отслеживания вручную:источник
$.data
не включает в себя манипулирование строкМне нужно было что-то в точности как это (в немного более сложной среде и решение с большим количеством 'mouseenters' и 'mouseleaves' не работало должным образом), поэтому я создал небольшой плагин jquery, который добавляет метод ismouseover. До сих пор это работало довольно хорошо.
Затем в любом месте документа вы называете его так, и он возвращает true или false:
Я протестировал его на IE7 +, Chrome 1+ и Firefox 4 и работает правильно.
источник
В jQuery вы можете использовать .is (': hover'), поэтому
Теперь будет наиболее кратким способом обеспечить функцию, запрошенную в OP.
Примечание: выше не работает в IE8 или ниже
Как менее лаконичная альтернатива, которая работает в IE8 (если я могу доверять модусу IE8 в IE9) и делает это без
$(...).hover(...)
повсеместного срабатывания , и при этом не требует знания селектора для элемента (в этом случае ответ Ivo проще):источник
$(':hover')
что работает в IE8. Это действительный псевдо-селектор CSS2, поэтому он должен работать.Я взял идею SLaks и обернул ее в небольшой класс .
источник
Я сделал плагин JQuery, который может сделать это и многое другое. В моем плагине, чтобы получить все элементы, над которыми в данный момент находится курсор, просто сделайте следующее:
Как я уже упоминал, он также имеет множество других применений, как вы можете видеть в
jsFiddle найден здесь
источник
Поскольку я не могу комментировать, я напишу это как ответ!
Пожалуйста, поймите разницу между css selector ": hover" и событием hover!
": hover" является селектором css и действительно был удален вместе с событием при его использовании таким образом
$("#elementId").is(":hover")
, но это означает, что он не имеет никакого отношения к наведению на jQuery.если вы кодируете
$("#elementId:hover")
, элемент будет выделен только при наведении курсора мыши. Вышеприведенный оператор будет работать со всеми версиями jQuery, так как вы выбираете этот элемент с чистым и законным выбором CSS.С другой стороны, событие наведения, которое
действительно истолковывается как jQuery 1.8, здесь состояние с сайта jQuery:
Почему они удалили использование (": hover") неясно, ну да ладно, вы все еще можете использовать его, как описано выше, и вот небольшой взлом, чтобы все еще использовать его.
О, и я бы не рекомендовал версию с тайм-аутом, поскольку это приносит большую сложность , используйте функции тайм-аута для такого рода вещей, если нет другого пути, и поверьте мне, в 95% процентов всех случаев есть другой путь !
Надеюсь, я смогу помочь парочке людей там.
Привет Энди
источник
Спасибо вам обоим. В какой-то момент мне пришлось отказаться от попыток определить, была ли мышь все еще над элементом. Я знаю, что это возможно, но может потребоваться слишком много кода для выполнения.
Это заняло у меня немного времени, но я принял оба ваших предложения и придумал что-то, что сработало бы для меня.
Вот упрощенный (но функциональный) пример:
И затем, чтобы сделать эту работу над текстом, это все, что мне нужно сделать:
Наряду с большим количеством причудливых CSS, это позволяет использовать очень полезные подсказки при наведении курсора. Кстати, мне понадобилась задержка при наведении мыши из-за крошечных промежутков между флажками и текстом, которые вызывали вспыхивающую подсказку при перемещении мыши. Но это работает как шарм. Я также сделал нечто подобное для событий фокусировки / размытия.
источник
Я вижу, что для этого часто используются тайм-ауты, но в контексте события, вы не можете посмотреть на координаты, как это ?:
В зависимости от контекста вам может потребоваться убедиться (this == e.target) перед вызовом areXYInside (e).
fyi- Я рассматриваю использование этого подхода внутри обработчика dragLeave, чтобы подтвердить, что событие dragLeave не было вызвано входом в дочерний элемент. Если вы как-то не проверяете, что находитесь внутри родительского элемента, вы можете ошибочно предпринять действия, которые предназначены только для тех случаев, когда вы действительно покидаете родительский элемент.
РЕДАКТИРОВАТЬ: это хорошая идея, но не работает достаточно последовательно. Возможно, с некоторыми небольшими изменениями.
источник
Вы можете проверить, есть
jQuery
ли у какого-либо дочернего div определенный класс. Затем, применяя этот класс при наведении курсора мыши на определенный элемент div, вы можете проверить, находится ли указатель мыши над ним, даже если вы наводите курсор мыши на другой элемент на странице. Я использовал это, потому что во всплывающем окне у меня были пробелы между элементами div, и я хотел закрывать всплывающее окно только тогда, когда я выходил из всплывающего окна, а не когда я перемещал мышь над пробелами во всплывающем окне. Поэтому я вызвал функцию наведения мыши на элементе содержимого (который закончил всплывающее окно), но он вызывал функцию закрытия только тогда, когда наложил содержимое на элемент содержимого, И был вне всплывающего окна!источник
Это был бы самый простой способ сделать это!
источник
Вот техника, которая не опирается на jquery и использует собственный
matches
API DOM . Он использует префиксы вендоров для поддержки браузеров, возвращающихся к IE9. Смотрите matchselector на caniuse.com для более подробной информации.Сначала создайте функцию matchSelector, вот так:
Затем, чтобы обнаружить зависание:
источник
Я ответил на это в другом вопросе со всеми деталями, которые могут вам понадобиться:
Обнаружение наведения IF на элемент с помощью jQuery (имеет 99 голосов на момент написания)
По сути, вы можете сделать что-то вроде:
Это работает, только если
oi
это объект jQuery, содержащий один элемент. Если сопоставлено несколько элементов, необходимо применить к каждому элементу, например:Это было проверено начиная с jQuery 1.7.
источник
Вот функция, которая помогает вам проверить, находится ли мышь внутри элемента или нет. Единственное, что вам нужно сделать, - это вызвать функцию, в которой вы можете иметь связанный с мышью EventObject. что-то вроде этого:
Вы можете увидеть исходный код здесь, в github или внизу поста:
https://github.com/mostafatalebi/ElementsLocator/blob/master/elements_locator.jquery.js
источник
Продолжая то, что сказал «Happytime harry», обязательно используйте функцию .data () jquery для хранения идентификатора тайм-аута. Это сделано для того, чтобы вы могли очень легко получить идентификатор тайм-аута, когда «mouseenter» будет запущен на том же элементе позже, что позволит вам устранить триггер для исчезновения всплывающей подсказки.
источник
Вы можете использовать jQuery mouseenter и mouseleave. Вы можете установить флаг, когда мышь входит в нужную область, и снять флаг, когда она покидает область.
источник
Я объединил идеи из этой темы и придумал это, что полезно для показа / скрытия подменю:
Кажется, работает на меня. Надеюсь, это кому-нибудь поможет.
РЕДАКТИРОВАТЬ: Теперь реализация этого подхода не работает правильно в IE.
источник
Я не мог использовать ни одно из предложений выше.
Почему я предпочитаю свое решение?
Этот метод проверяет, находится ли мышь над элементом в любое время, выбранное Вами .
Mouseenter и : hover - это круто, но mouseenter срабатывает только при перемещении мыши, а не когда элемент перемещается под мышью.
: hover довольно милый, но ... IE
Итак, я делаю это:
№ 1. сохраняйте положение мыши x, y при каждом ее перемещении, когда вам нужно,
№ 2. проверяйте, находится ли мышь над любым из элементов, соответствующих запросу, что-то делает ... например, вызывает событие mouseenter
источник
Просто заметка о популярном и полезном ответе Артура Голдсмита выше: если вы перемещаете указатель мыши от одного элемента к другому в IE (по крайней мере до IE 9), у вас могут возникнуть некоторые проблемы, чтобы заставить его работать правильно, если новый элемент имеет прозрачный фон (который будет по умолчанию). Мой обходной путь - дать новому элементу прозрачное фоновое изображение.
источник
FIDDLE
источник
Ты можешь использовать
is(':visible');
в jquery. И для $ ('. Item: hover') это работает и в Jquery.это сниметет код htm:
и это код JS:
это то, о чем я говорил :)
источник