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

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

2 голосов
/ 21 ноября 2008

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

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

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

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

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

1 Ответ

11 голосов
/ 21 ноября 2008

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

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

Хорошее решение - использовать события 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. Это не должно быть проблемой.

...