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

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

当前回答

在这种情况下,我经常使用缩写html标签。

<缩写标题=“悬停”>文本</abbr>

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

其他回答

在这种情况下,我经常使用缩写html标签。

<缩写标题=“悬停”>文本</abbr>

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

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

.hoverable { 位置:相对; } .hoverable >。hoverable__tooltip { 显示:没有; } .hoverable:悬浮>。hoverable__tooltip { 显示:内联; 位置:绝对的; 上图:1 em; 左:1 em; 背景:# 888; 边框:1px纯黑色; } < div class = " hoverable”> <span class="hoverable__main">正文</span> <span class="hoverable__tooltip">悬停文本</span> . < / div >

(显然,样式可以改进)

使用title属性,例如:

<div title=“他们悬停的话”>悬停我</div>

或者:

<span title=“他们悬停的话”>悬停我</span>

您正在寻找工具提示

对于基本的工具提示,您需要:

<div title="This is my tooltip">

对于一个更花哨的javascript版本,你可以查看:

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

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

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

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