наведение jquery остается зависшим, когда курсор перемещается с помощью прокрутки колесика мыши

#jquery #hover #mouseover

#jquery #наведение #наведение курсора мыши

Вопрос:

Я не уверен, является ли это ограничением функции jquery или ошибкой в моем коде, но я вижу, что такое же поведение происходит в примере на http://api.jquery.com/hover /

Моя реализация заключается в том, что у меня есть всплывающее окно, которое отображается при наведении курсора мыши на товар, и скрыто при наведении курсора мыши.

Проблема заключается в том, что при наведении курсора мыши и отображении всплывающего окна, если я прокручиваю страницу вниз / вверх с помощью колеса мыши / трекпада, в то время как курсор мыши больше не находится на товаре из-за прокрутки, поведение при наведении курсора не обнаружено, и всплывающее окно остаетсяна виду, остается в середине экрана, поскольку его положение определяется во время события наведения относительно положения продукта на экране.

Имеет ли это смысл? Кто-нибудь может помочь?

Комментарии:

1. Я считаю, что это скорее ограничение JavaScript, я уверен, что я видел, как его спрашивали раньше где-то в StackOverflow.

2. Возможно, это проблема с браузером? Я попробовал это сейчас в FF 7, и я не могу воспроизвести проблему. Какой браузер вы используете?

3. @mydoghasworms: я могу повторить ошибку в Chrome 14

4. @mydoghasworms: WebKit (Safari, Chrome) делает это, просто наведите курсор на тег «jquery» выше, пока не появится всплывающее окно с информацией, затем поверните его, и всплывающее окно не исчезнет.

5. О да, вот оно: только что попробовал это и в Chrome 14, и теперь я вижу, как это происходит.

Ответ №1:

Это несколько навязчивое решение, но оно должно работать:

 // The normal hover handler
$("#productElement").hover(function(){
  $("#otherElement").show();
},function(){
  $("#otherElement").hide();
});

// A global scroll handler that hides an specific
// element whenever the user scrolls.
$(document).scroll(function(){
  $("#otherElement").hide();
});
  

В приведенном выше коде #productElement это будет метка, на которую пользователь наводит курсор, и #otherElement это будет диалоговое окно, которое появляется при наведении курсора. Это всего лишь основы того, как это будет работать; вы должны адаптировать его к своему коду.

Комментарии:

1. Спасибо за отзывы, ребята, по крайней мере, теперь я знаю, что это ограничение js в браузерах webkit.

2. @Winterain: добро пожаловать! Некоторые ошибки, связанные с браузером, действительно могут быть проблемой!