jQuery 在悬停动态链接后更改图像

Question

因此，我生成了一个名称列表，这些名称在数据库中链接了图像。 我会将这些名字放入 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 也是如此，依此类推。

谢谢。

Answer 1

您应该尝试：

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

您必须在 div#divid_1 中添加 才能正常工作。

在此处查看 jsFiddle 示例

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

我没有尝试过，但应该可以