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
精彩评论