当用户使用JQuery悬停在链接上时,如何显示图像

Question

我有一份产品清单.

<ul>
<li><a href="chair.php">CHAIR</a></li>
<li><a href="table.php">TABLE</a></li>
<li><a href="sofa.php">SOFA</a></li>
<li><a href="bookshelf.php">BOOKSHELF</a></li>
<ul>

鼠标悬停我希望在一个div #preview显示产品的缩略图.

我不想为每个图像硬编码jquery.而是我想写的JQuery能吸引图像位置并插入到DOM.我不知道如何标记HTML以包含图像位置.有任何想法吗？

Answer 1

我建议使用新的HTML5数据属性,如下所示:

<a href="chair.php" data-thumbnail-src="chair.jpg">CHAIR</a>

然后你可以设置jQuery代码如下:

$(function () {
    var $preview = $("#preview");

    $("ul#products a").hover(function () {
        $preview.attr("src", $(this).attr("data-thumbnail-src"));
    }, function () {
        $preview.attr("src", "");
    });
});

在jQuery 1.4.3及更高版本中,我相信$(this).data("thumbnail-src")也会有效.