c# - 鼠标悬停时的图像在页面加载时占用空间

Question

我试图在鼠标悬停时显示图像并在鼠标悬停时隐藏它。我在鼠标悬停和鼠标移出方面取得了成功，但图像实际上占据了文本周围的空间，尽管我的可见性是隐藏的。文本被图像空间包围，但图像在鼠标悬停时显示。

这是代码:

<td valign="middle" class="table_td td top" style="width: 347px">
                                                      <div id="Style16" style="position:relative; height:100%; left:50%; bottom:700%; visibility:hidden; border:solid 0px #CCC; padding:5px"><img src="images/window-decal-image.gif"></div> 
                                                      <span class="feature_text" style="cursor:pointer" onmouseover="ShowPicture('Style16',1)" 
                                                      onmouseout="ShowPicture('Style16',0)" id="a16">Storefront Window Decal</span>

                                                      <span class="feature_text_small">(5"x3.5" double sided decal)</span></td>  

<script language="javascript" type="text/javascript">




function ShowPicture(id,Source) 
{
 var vis, elem;

  if (1 == Source)
 {
 vis = "visible";
 }
else if (0 == Source)
 {
 vis = "hidden";
 }
 else
 {
 throw new RangeError("Unknown Flag");
}

 if (elem = document.getElementById(id))
{
  elem.style.visibility = vis;
}
 else
 {
 throw new TypeError("Element with id '"+id+"' does not exist.");
 }
 return vis;
}

</script>

Answer 1

您必须在无和 block /内联之间切换显示样式。如果您只是设置可见性，则会保留空间。