如何找到一个元素的位置并将其应用到另一个元素？
我的页面上有一个星形图标。如果用户未登录，我将显示另一张图像，上面写着“请登录”。我遇到的问题是该图像显示在下一行中一直到左侧。我需要将其显示在星号图标的正下方。我试图找到星号图标的位置，然后调整顶部和底部值，并使“请登录”图像显示在其正下方。
<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();
感谢任何帮助。谢谢！
更新：这是小提琴链接 - http://jsfiddle.net/eqACv/2/
I have a star icon on a page. If the user is not logged in, I'm displaying another image which says "Please sign in". The problem I'm having is this image get's displayed in the next line all the way to left. I need to show it right below the star icon. I'm trying to find the position of the star icon, then adjust the top and bottom values and have the "Please sign in" image show right below it.
<asp:Image ID="imgFavorite" runat="server" ImageAlign="AbsMiddle" />
<div id="toolTipDivTitle" class="tooltip"></div>
And my 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();
Any help is appreciated. Thanks!
Update: Here's the fiddle link - http://jsfiddle.net/eqACv/2/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这是您想要的小提琴：
http://jsfiddle.net/eqACv/8/
对于您应该添加 ('blind',500) 作为隐藏和显示函数的参数以获得更大的效果。（需要 jQuery UI）
Here is a fiddle with what you want :
http://jsfiddle.net/eqACv/8/
For an even greater effect you should add ('blind',500) as parameters for the functions hide and show.(Requires jQuery UI)
http://api.jquery.com/position/
http://api.jquery.com/offset
检查这些，它们的行为不同。
http://api.jquery.com/position/
http://api.jquery.com/offset
Check those, they behave differently.