鼠标悬停的按钮或框

Question

如何制作按钮或其他内容，您可以将鼠标悬停在框或按钮上并查看小页面。转到https://www.youtube.com/watch?v=HGSUZwvFqG0并将鼠标悬停在评论中的名称上，您就会明白我的意思:)谢谢，请回答：）

如果你将鼠标悬停在一个名字上，Facebook会有类似的东西，但我请你不要发布这个代码。 THX

我尝试用模态框制作东西，但它不像youtube上的那样。

在Facebook上，该框已修复，但在YouTube上却不是

Answer 1

我会从这样的事情开始：

<div class="person">
    <a href="link.html">Name</a>
    <div class="info">Here is more information, add anything you want here</div>
</div>

然后在css：

.person{
   position:relative;
}
.person .info{
   position:absolute;
   //Change these to position the box wherever
   top:10px; 
   left:10px;
   display:none;
}
.person:hover .info{
   display:block;
}

这将显示一个链接，当悬停时，将显示更多信息。这很粗糙，但是一个很好的跳跃点。添加一些javascript可以使这个行为更好一些，例如考虑使用像悬停意图这样的东西。