0

我想根据鼠标悬停时字段的值显示图像。我在这里搜索过它，并尝试了类似下面的东西。但问题是我不能使用#image，因为没有这样的占位符。

 $("#s_1_1_60_0_icon").mouseover(function () {
    $(*'#image'*).show(); //displays image on mouse in
 }
 $("#s_1_1_60_0_icon").mouseleave(function(){
    $(*'#image'*).hide(); //hides image on mouse out
});
});

我想显示像工具提示这样的图像。请提出实现这一目标的方向。

谢谢

4

1 回答 1

1

这是一个基于你的小提琴的简单的。 http://jsfiddle.net/RnnrA/

就像网页设计中的大多数事情一样，有数百万种方法可以做某事。如果你能给我们更多细节（例如图像在哪里），我可以给你一个更好的方法。

$("li a").mouseover(function(){
    $("#img_"+$(this).attr("id")).show();
});
$("li a").mouseout(function(){
    $("#img_"+$(this).attr("id")).hide();
});

这个有点复杂：http: //jsfiddle.net/e7UVb/

我制作了一个包含图像的 div，每次将鼠标悬停在它上面时，都会创建一个图像元素并用图像填充它，然后将其附加到 div 中。在 mouseout 上它会破坏图像元素。这将需要更多的客户端调用，因为每次您将鼠标悬停在它上面时都需要获取图像。在我的示例中，我只使用了一张图片，您必须使用一些更好的逻辑来确定要为这张图片显示哪张图片。

$("li a").mouseover(function(){
    $("#imagePlaceholder").append($("<img></img>").prop("src","http://www.psdgraphics.com/file/psd-credit-card.jpg").prop("height","50"));
});
$("li a").mouseout(function(){
    $("#imagePlaceholder").empty();
});

最后，一个更简单的版本：http: //jsfiddle.net/Zt2pu/1/

$("li a").mouseover(function(){
    $("#imagePlaceholder").prop("src","http://www.psdgraphics.com/file/psd-credit-card.jpg").prop("height","50");
});
$("li a").mouseout(function(){
    $("#imagePlaceholder").prop("src","");
});

这里我只是做了一个空的图像标签，在鼠标悬停时我改变了 src 属性。在鼠标移出时，我清空了 src 属性。就像上一个一样，每次鼠标悬停时，您都会有一个客户端调用来下载图像。

归根结底，最上面的一个是最简单和最容易的。客户端将加载所有图像一次且仅一次，因此只有初始调用来下载所有图像。

再次，让我们更好地了解您实际在做什么，我们可以就如何实现这一目标为您提供更好的答案。与此同时，玩得开心。

于 2013-11-10T14:40:25.677 回答