jQuery: если не навести курсор на элемент X или Y, скрыть Y? - PullRequest
Новая
       20

jQuery: если не навести курсор на элемент X или Y, скрыть Y?

2 голосов
/ 29 июля 2011

У меня есть несколько изображений, выстроенных рядом друг с другом, и всякий раз, когда я наводю на них одно из изображений, появляется всплывающая подсказка для этого изображения (с некоторой информацией и т. Д.). Информация всплывающей подсказки загружается с помощью ajax, но это не имеет значения.

Проблема в том, что всплывающая подсказка загружается при наведении курсора на одно из изображений и исчезает всякий раз, когда я нахожу за его пределами. Так что я не могу навести курсор на всплывающую подсказку, которая мне нужна.

Так что я подумал о решении записать каждый элемент, который я нахожу в объекте. Как это: 

$('*').mouseenter(function() {
    currently_hovering = $(this);
});

и затем, когда я наведу курсор на изображение, проверьте, находится ли мышь над всплывающей подсказкой, и если это так, то ничего не делайте, если нет, то скрывайте подсказку. Звучит хорошо, правда? Но по какой-то причине он отказывается регистрироваться всякий раз, когда я наводю курсор мыши на всплывающую подсказку. Он по-прежнему действует так, как будто я нахожусь над изображением (но всплывающая подсказка ужасно мигает, когда я перемещаю в нем мышь).

Я предполагаю, что он не регистрирует подсказку, потому что он абсолютно позиционирован? Он расположен над изображением (таким образом, я могу навести на него мышь, не пряча его). Я пытался использовать mouseenter / mouseover и hover, все с одинаковым результатом.

Есть ли какие-нибудь решения для этого?

Ответы [ 3 ]

1 голос
/ 29 июля 2011

Частично проблема может заключаться в том, что вы загружаете информацию с помощью ajax.

Вам необходимо использовать функцию live () для данных, добавляемых на страницу после обычной загрузки страницы, чтобы скрипты работалипо указанным данным.

Вроде как: 

    $('.day').live('mouseover mouseout',function(e) {
        if (e.type === 'mouseover') {
            $(this).addClass('day-hover');
        } else {
            $(this).removeClass('day-hover');
        }
    });
0 голосов
/ 29 июля 2011

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

Похоже, что вызов onmouseout изображения вызывается перед onmouseover всплывающей подсказки, когда вы наводите указатель мыши на подсказку, поэтому ваша переменная currently_hovering не установлена ​​на всплывающую подсказку.

Не могли бы вы попробовать использовать тайм-аут при наведении курсора на изображение? Даже тайм-аут в 0 секунд может сработать, этого достаточно, чтобы позволить браузеру обрабатывать всплывающую подсказку перед проверкой значения currently_hovering?

0 голосов
/ 29 июля 2011

Может быть, вы можете обернуть ваше изображение, например, в тег <div>, сделать jquery "listen" при наведении курсора на этот тег div и добавить подсказку внутри этого тега сразу после самого изображения.Тогда при наведении курсора на всплывающую подсказку не должно возникать мерцания, потому что вы не оставляете div, который делает его видимым.Что-то вроде 

<div class="imageWrapper">
  <img src="source" />
  <span class="tooltip">tooltip text</span>
</div>

тогда js будет что-то вроде 

$('div.imageWrapper').hover(function(){
  var tooltipText = callWhateverMethodToLoadTooltipText();
  if($('span.tooltip',$(this)).length == 0)
    $(this).append('<span class="tooltip">' + tooltipText + '</span>');
  else
    $('span.tooltip',$(this)).text(tooltipText).show();
}, function(){
  $('span.tooltip', $(this)).hide();
});
...