Любые 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, который зависает, то в ту же секунду вы его переворачиваете див снова исчезает.

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

Ура.

1 3
javascript jquery tooltip mouseover

1 ответ:

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

Простое переключение событий на 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(), уже перекрывающий бит.

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

5