Блог

Главная - Вопросы по программированию - jQuery изменяет изображение после наведения курсора мыши на динамическую ссылку

jQuery изменяет изображение после наведения курсора мыши на динамическую ссылку

#php #jquery #mouseover

#php #jquery #наведение курсора мыши

Вопрос:

Итак, я создаю список имен, с которыми связано изображение в базе данных. Я помещу имена в HTML-список. Теперь у меня есть 1 div, который должен содержать изображение, связанное с именем, поэтому, как только я наведу курсор на другую ссылку, изображение должно измениться.

Эти ссылки генерируются PHP и могут состоять из 1 или 100 ссылок.

Я получил следующий HTML-код:

 <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

<div id="divid_1"></div>

Как только я наведу курсор мыши на ссылку 1; Я хочу, чтобы было показано соответствующее изображение, то же самое для ссылки 2 и так далее.

Спасибо.

Комментарии:

1. Вы понимаете, что это означает, что изображение загружается при наведении курсора мыши? Таким образом, пользователи увидят «вспышку». Это некрасиво. редактировать Я имею в виду, что изображения предварительно не загружены.

2. Согласен. Вероятно, вам лучше загружать предварительный просмотр по щелчку, а не полное изображение при наведении курсора мыши

Ответ №1:

Вы должны попробовать :

 $("ul li").mouseover(function() {
    $("#divid_1").find("img").attr("src",$(this).find("a").attr("href"));
});

Вы должны добавить <img> в свой div#divid_1 , чтобы это сработало.

Смотрите пример jsFiddle здесь

Ответ №2:

 <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

<div id="divid_1"><img id='img'></div>

JS:

 $('ul > li > a').hover(function() { $('#img').src = $(this).attr('href'); })

Я не пробовал, но должно сработать