Question

我尝试在鼠标悬停在文本上时显示图像。它工作正常。并且应该显示图像的对齐，使得图像的末端应该在容器处。它适用于下面显示的代码，仅在IE7中。在一切事情上，它都会被切断。这里有什么问题？

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

<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

我建议您在div上使用background-image而不是单独的<img>代码，并background-position:right;根据您的要求对其进行对齐。

您可能需要一些其他相关的CSS来完善它（background-repeat可能？），但我建议这样做。

我还建议将所有样式代码移到单独的CSS <style>元素中，以减少HTML代码中的混乱并使其更具可读性。

悬停时图像显示的对齐仅适用于IE7？

1 个答案: