我刚刚尝试了一个 CSS 工具提示，它会随着 CSS3 的过渡而淡入淡出。我想要一个工具提示效果，当您将鼠标悬停在链接上时，工具提示会出现，但在仅使用 CSS3 时会淡出。
我已经让它工作到一定程度了，但由于某种原因，当我将鼠标悬停在它应该在的位置时，它会激活，即使它最初定位在 left:-999px; 上。
所以基本上，我做错了什么/我想要的是否可能？ （注意我不想用 JS/JQuery 做任何事情，只是想看看我是否可以用 CSS 来做）
你可以看到并使用它 此处。
I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I was going for a tooltip effect that when you hover a link, the tooltip appears, but fades in using only CSS3.
I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's initally positioned left:-999px;.
So basically, what am I doing wrong/is what I was going for possible? (Note I don't want to do anything with JS/JQuery, was just curious to see if I could do it in CSS)
You can see and play with it here.
发布评论
评论（2）
您需要将工具提示设置为不正常显示。
编辑：似乎不是将显示设置为无，而是将位置设置为绝对。
Edit2：看来我被打败了。
You need to set the tool tip to not even be shown normally.
Edit: It seem that rather then set display to none, just position to absolute.
Edit2: it seems I was beaten to it.
您的
span仍在document流程中。您可以通过将其
display设置为none（如上面的注释所示）来删除它，或者将其position设置为absolute>，这似乎就是您将其隐藏在屏幕左边缘之外的目的。Your
spanis still in thedocumentflow.You can remove it by setting its
displaytonone, as the comment above suggests, or setting itspositiontoabsolute, which seems to be what you were getting at to hide it off the left edge of the screen.