html - 在鼠标悬停时在 html 页面上显示工具栏。（悬停在推文上时类似于推特）

Question

在我的网站中，当用户将鼠标悬停在任何回复上时，我想显示带有选项的工具栏。该功能类似于我们将鼠标悬停在 twitter 中的推文上时。我怎样才能做到这一点。

谢谢

Answer 1

这是我尝试过的一个简单的 HTML/CSS 模型...

HTML：

<div class="container">
    Testing text!
    <div class="tooltip">Here's a tooltip</div>
</div>
<div class="container">
    Testing text!
    <div class="tooltip">Here's a tooltip</div>
</div>
<div class="container">
    Testing text!
    <div class="tooltip">Here's a tooltip</div>
</div>

CSS：

.tooltip { display: none; }
.container { width: 300px; height: 50px; margin: 10px 0px; border: 1px solid #000; }

.container:hover > div.tooltip { display: block; }

jsFiddle

这个想法是您将工具提示 div 包含在另一个包含您的内容的 div 中。此工具提示的默认display设置为none。然后你有 CSS.container:hover > div.tooltip { display: block; }声明“当容器类悬停时，带有工具提示类的 div 的子级将更改为display: block”。这也很容易用 Javascript 完成，但我认为这应该足以满足您的需求。希望这有帮助！