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

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

Итак, вот базовый 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 исчезнет.

Любые идеи, как это можно исправить?

Ваше здоровье.


javascript jquery tooltip mouseover fade
person Christian    schedule 16.05.2010    source источник

Ответы (1)


arrow_upward
5
arrow_downward

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

Простое переключение ваших событий на 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> внутри не будет проблемой :)

person Nick Craver    schedule 16.05.2010
comment
Привет, Ник, спасибо за быстрый ответ. Информация была полезной, хотя и не решила мою проблему — на самом деле усугубила ее — я чувствую, что это больше связано с моим плохим объяснением проблемы, чем с вашим ответом. Вместо того, чтобы ожидать, что вы догадаетесь, где я, я сделал короткую демонстрацию: christianbullock.com/demo Надеюсь, вам будет легче увидеть мою проблему. Когда вы наводите курсор на синюю кнопку, вкладку, что угодно... она исчезает в новом div. Я использовал позиционирование CSS, чтобы этот div перекрывал синюю кнопку... поэтому я думаю, что браузер не знает, что я ввел новый div. - person Christian; 17.05.2010
comment
@Christian - попробуйте обновленный ответ, хорошая работа со страницей, очень полезно :) - person Nick Craver; 17.05.2010
comment
Ник, ты легенда - решил мою проблему :). Я вернусь, когда у меня будет больше представителей, чтобы добавить +1 к вашим ответам. Бесконечно благодарен. ;) - person Christian; 17.05.2010