jQuery change image after hovering a dynamic link

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