javascript - 带有鼠标悬停的按钮或框

Question

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

如果您将鼠标悬停在名称上，Facebook 也会有类似的东西，但我请您不要发布此代码。谢谢

我试图用模态框制作一些东西，但它不像 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 可以使它表现得更好一些，例如考虑使用悬停意图之类的东西。