Любые теги HTML внутри подсказки приводят к закрытию основной подсказки при наведении курсора - PullRequest
Новая
       34

Любые теги HTML внутри подсказки приводят к закрытию основной подсказки при наведении курсора

3 голосов
/ 17 мая 2010

Я новичок в jQuery, фактически, любой вид AJAX / JavsScript (хотя и не новичок в PHP, xHTML и CSS). В любом случае, я пытаюсь добиться эффекта, похожего на всплывающую подсказку, когда я могу навести курсор на элемент div ... новый элемент div появляется над ним, а затем, когда я выхожу из div, «tooltip» исчезает.

Итак, вот основной jQuery, который мне удалось собрать вместе, читая странное руководство здесь и там: 

$(function()
{
    $('#sn-not-logged-in').hover(function()
    {
        $('#sn-not-logged-in-hover').fadeIn('medium');
    });

    $('#sn-not-logged-in-hover').mouseout(function()
    {
        $('#sn-not-logged-in-hover').fadeOut('medium');
    });

});

Проблема в том, что, если я поместил «любой» тег html внутри элемента div, который зависает, в тот момент, когда вы переворачиваете его, элемент div исчезает.

Есть идеи, как это можно исправить?

Приветствия.

1 Ответ

5 голосов
/ 17 мая 2010

Обновлено для комментариев

Простое переключение событий на mouseleave вместо mouseout и mousenter вместо hover решит проблему для вашей разметки, например: 

$(function() {
  $('#sn-not-logged-in').mouseenter(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  });
  $('#sn-not-logged-in-hover').mouseleave(function() {
    $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

Предыдущий ответ

Измените .hover() немного вверх, как это: 

$(function() {
  $('#sn-not-logged-in').hover(function() {
    $('#sn-not-logged-in-hover').fadeIn('medium');
  }, function() {
     $('#sn-not-logged-in-hover').fadeOut('medium');
  });
});

.hover() выполняется в mouseenter и mouseleave (первая и вторая предоставляемые вами функции соответственно), поэтому он вызывает fadeIn(), уже частично перекрывающийся.

Однако mouseout срабатывает даже при вводе дочернего элемента , mouseenter, который использует .hover(), не будет. Так что в настоящее время действительно вызывает вашу текущую проблему ... перемещение мыши на тег <img> внутри, не будет проблемой:)

...