Question

在stackoverflow中，当我们将鼠标悬停在用户的声誉上时，我们会看到一个文本。我在很多地方看过这个，源代码告诉我它可以在没有js的情况下完成。我试过并且只得到了这个 -

 <div="text">hover me</div>

Answer 1

使用title属性，例如：

<div title="them's hoverin' words">hover me</div>

或：

<span title="them's hoverin' words">hover me</span>

Answer 2

在这种情况下，我经常会找到缩写html标签。

<abbr title="Hover">Text</abbr>

https://www.w3schools.com/tags/tag_abbr.asp

Answer 3

title属性也适用于其他html元素，例如链接......

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>

Answer 4

您正在寻找工具提示

对于基本工具提示，您需要：

<div title="This is my tooltip">

对于更高级的javascript版本，您可以查看：

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

上面的链接为您提供了12个工具提示选项。

Answer 5

这也可以在 CSS 中完成，以获得更多的可定制性：

.hoverable {
  position: relative;
}

.hoverable>.hoverable__tooltip {
  display: none;
}

.hoverable:hover>.hoverable__tooltip {
  display: inline;
  position: absolute;
  top: 1em;
  left: 1em;
  background: #888;
  border: 1px solid black;
}

<div class="hoverable">
  <span class="hoverable__main">Main text</span>
  <span class="hoverable__tooltip">Hover text</span>
</div>

（显然，样式可以改进）

添加没有javascript的悬停文本，就像我们将鼠标悬停在用户的声誉上一样

5 个答案: