JQuery - Как исправить этот ролловер изображения?

Question

Привет ребята У меня есть этот маленький Jquery скрипт: link text

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

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

Я прекрасно работает, но я хочу, чтобы иметь возможность парить над текстом находится в изображения, каждый раз, когда я пытаюсь, он просто держит «прыгающий»

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

Answer 1

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

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

Хорошим решением является использование MouseEnter и MouseLeave события вместо наведении курсора мыши и отведении указателя мыши:

$(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 # по-прежнему получает события mouseenter/mouseleave (даже если вы их не слушаете), но события не будут пузыряться до их родительского элемента. См. this page для продолжения обсуждения на нем.

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