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

【问题标题】：jQuery change image after hovering a dynamic link悬停动态链接后jQuery更改图像
【发布时间】：2011-05-09 12:06:55
【问题描述】：

所以我生成了一个在数据库中链接图像的名称列表。我会将这些名称放在一个 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 相同，依此类推。

谢谢。

【问题讨论】：

您是否意识到这意味着当您将鼠标悬停时会加载图像？所以用户会看到一个“闪光”。那不漂亮。 edit 我的意思是：图像没有预加载。
同意。可能您应该更好地在单击时加载预览而不是在鼠标悬停时加载完整图像

标签： php jquery mouseover

【解决方案1】：

你应该试试：

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

您必须在您的 div#divid_1 中添加一个 <img> 才能使用。

See jsFiddle example here

【讨论】：

【解决方案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'); })

我没试过，但应该可以

【讨论】：