开发者

jQuery change image after hovering a dynamic link

开发者 https://www.devze.com 2023-03-04 03:39 出处:网络
So I generate a list of names that got an image linked in the database. I will put the names in an HTML list. Now I got 1 div that should contain the image linked to the name, so as soon as I hover an

So I generate a list of names that got an image linked in the database. I will put the names in an HTML list. Now I got 1 div that should contain the image linked to the name, so as soon as I hover an other link; the image should change.

These links are generated by PHP and can be either 1 or 100 links.

I got the following 开发者_运维问答HTML code:

<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>

As soon I hover over link 1; I want the corresponding image to be shown, same for link 2 and so on.

Thanks.


You should try :

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

You must add an <img> in your div#divid_1 for this to work.

See jsFiddle example here


<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'); })

I didn't try, but should work

0

精彩评论

暂无评论...
验证码 换一张
取 消