JQuery - Как мне исправить этот ролловер изображения?
Привет, ребята, у меня есть этот маленький скрипт JQuery: текст ссылки
$(document).ready(function()
{
$('#image p').hide();
$('img').hover(function()
{
$('#image p').show(200);
}, function()
{
$('#image p').hide(200);
});
});
Я работаю нормально, но я хочу иметь возможность наводить курсор на текст, расположенный в изображении, каждый раз, когда я пытаюсь, он просто продолжает "подпрыгивать"
Любая помощь высоко ценится, Благодарность, Кит
Ответы 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. Это не должно быть проблемой.
Ты прав. Это была ошибка вырезания и вставки. В любом случае, в последнем мероприятии не было необходимости.
@Marko Dumic - это имеет смысл, если бы было 2 абзаца, они бы оба отображались. $ (This) .show () лучше, хорошо, спасибо
Идея хороша, но предоставленный код не работает. Последний обработчик события должен быть указан следующим образом: $ ('# image p'). Mouseover (function () {$ (this) .show ()}