Jquery - Как я могу исправить этот Image Rollover?

Question

Привет, ребята. У меня есть небольшой скрипт Jquery: текст ссылки

$(document).ready(function() 
{
      $('#image p').hide();

      $('img').hover(function()
      {
            $('#image p').show(200); 
      }, function()
      {
            $('#image p').hide(200); 
      });
}); 

Я отлично работаю, но я хочу, чтобы при наведении курсора на текст, расположенный на изображении, он просто "подпрыгивал"

Любая помощь очень ценится, Спасибо, Кит

Answer 1

Хороший вопрос.

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

Хорошее решение - использовать события mouseenter и mouseleave вместо mouseover и mouseout:

$(document).ready(function(){
    $('#image p').hide();

    $('#image').bind("mouseenter", (function(){
        $('#image p').show(200)
     }));

    $('#image').bind("mouseleave", (function(){
        $('#image p').hide(200)
     }));

});

Основное различие между событиями mouseenter / mouseleave и событиями mouseover / mouseout заключается в том, что первые не всплывают.

В этом примере дочерний абзац div # image по-прежнему получает события mouseenter / mouseleave (даже если вы их не слушаете), но эти события не всплывают до их родительского элемента. См. эта страница для расширенного обсуждения.

Вы также должны назначить событие больше не тегу img, а содержащему div. Это не должно быть проблемой.