javascript - 如何找到元素的位置并将其应用于不同的元素？

Question

我在页面上有一个星形图标。如果用户未登录，我将显示另一张图片，上面写着“请登录”。我遇到的问题是这张图片一直显示在下一行的左边。我需要在星形图标下方显示它。我试图找到星形图标的位置，然后调整顶部和底部的值，并在其正下方显示“请登录”图像。

<asp:Image ID="imgFavorite" runat="server" ImageAlign="AbsMiddle" />
<div id="toolTipDivTitle" class="tooltip"></div>

还有我的 javascript -

 function showSignInPromptForTitle() {
    var toolTipDivTitle = $("#toolTipDivTitle");
    toolTipDivTitle.css('background', 'url(/SiteCollectionImages/CF_HoverOver.png) no-repeat');
    toolTipDivTitle.css('color', 'white');
    toolTipDivTitle.css('width', '160px');
    toolTipDivTitle.css('height', '83px');
    toolTipDivTitle.css('padding', '30px 5px 0px 20px');
    toolTipDivTitle.css('z-index', '9999');
    toolTipDivTitle.css('display', 'none');
    toolTipDivTitle.css('position', 'absolute');
    toolTipDivTitle.css('font-size', '11px');
    toolTipDivTitle.text('Sign in to add to your favorites.');
    toolTipDivTitle.show();

感谢任何帮助。谢谢!

更新:这是 fiddle 链接 - http://jsfiddle.net/eqACv/2/

Answer 1

这是你想要的 fiddle :

http://jsfiddle.net/eqACv/8/

为了获得更好的效果，您应该添加 ('blind',500) 作为函数 hide 和 show 的参数。(需要 jQuery UI)