Question

我正在尝试在Mouseover上显示图像并将其隐藏在Mouseout上。我在mouseover和mouseout上取得了成功但是图像实际上占据了文本周围的空间，尽管我的隐藏可见性。文本被图像空间包围，但图像在鼠标悬停时显示。

以下是代码：

<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

您必须在display和none / block之间切换inline样式。如果您只设置visibility，则会保留空格。

Answer 2

尝试“display：none”而不是“visibility：hidden”，并将display属性修改为“inline”或“none”，具体取决于。

鼠标悬停上的图像占用页面加载空间

2 个答案: