Question

我试图在鼠标上显示图像。它工作正常。但我得到的图片显示向下，最后一张图片带走了底部的空间。对于显示鼠标悬停的图片的最后一个文本，我希望图片的底部靠近文本而不是顶部。

HTML：

<td valign="middle" class="table_td td top" 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:absolute; visibility:hidden; border:solid 0px #CCC; padding:5px">
    <img src="images/window-decal-image.gif">
</div>

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;
    }

提前谢谢..

Answer 1

虽然我同意@ epascerello的评论，但你试过position:absolute; bottom: 0px;吗？

编辑：

等待，将工具提示的底部与其包含position: relative元素的底部对齐。要将工具提示的底部与容器顶部对齐，请使用bottom: 100%。

鼠标悬停上的图片有效但对齐？

1 个答案: