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

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

我建议使用 background-image在你的 div 而不是单独的 <img>标签，和 background-position:right;根据您的要求对齐它。

您可能需要一些其他相关的 CSS 才能使其完美(可能是 background-repeat？)，但我建议您这样做。

我还建议将所有样式代码移至单独的 CSS <style>元素来减少 HTML 代码中的困惑并使其更具可读性。