在gridview行中鼠标悬停时显示图像答案

【问题标题】：Display image on mouse hover in gridview row在gridview行中鼠标悬停时显示图像
【发布时间】：2014-01-07 20:28:42
【问题描述】：

我有一个 asp.net gridview。对于该 gridview 的每一行，我都有一个图像列。在鼠标悬停的那一列中，我需要像我们在具有 onmouseover 效果的 css 中那样显示大尺寸的图像。

请帮帮我。

【问题讨论】：

标签： javascript asp.net css c#-4.0 datagrid

【解决方案1】：

您可以设置绝对定位的 div 并显示为无。

<div id="imgContainer" style="position:absolute;display:none;" />

然后在你的javascript中

//Assuming you only have images in the image column
//If you have images in other columns just set a class on the column of the images 
// so you can select it with jquery. 
// tableid is the id of your table. Like <%=[idofgridview].ClientID%>
$("#tableid img").hover(function f(){
   //set position of the hidden div
   $("#imgContainer").position($(this).position().left, $(this).position().top);
   //put the image in the hidden div
   $("#imgContainer").append("<img src="+$(this).attr("src")+"/>");
   //assuming the image is full size in the table and just made smaller using css 
   //show the image.
   $("#imgContainer").show();

},
function () {
   //hide the div with fullsize image
   $("#imgContainer").hide();
   //clear out the html from the div
   $("#imgContainer").html("");
}
);

【讨论】：

您应该使用offset() 来设置元素的位置，而不是使用position()。它只获取当前位置。
你应该在 src 周围使用引号：.append("<img src=\"" + $(this).attr("src") + "\" />");