Question

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

请帮助我。

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

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

1 个答案: