在stackoverflow中,当我们将鼠标悬停在用户的声誉上时,我们会看到一个文本。我在很多地方看到过这种情况,源代码告诉我,它可以在没有js的情况下完成。我试过了,却只得到了这个
<div="text">hover me</div>
在stackoverflow中,当我们将鼠标悬停在用户的声誉上时,我们会看到一个文本。我在很多地方看到过这种情况,源代码告诉我,它可以在没有js的情况下完成。我试过了,却只得到了这个
<div="text">hover me</div>
当前回答
您正在寻找工具提示
对于基本的工具提示,您需要:
<div title="This is my tooltip">
对于一个更花哨的javascript版本,你可以查看:
http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632
上面的链接提供了12个工具提示选项。
其他回答
在这种情况下,我经常使用缩写html标签。
<缩写标题=“悬停”>文本</abbr>
https://www.w3schools.com/tags/tag_abbr.asp
使用title属性,例如:
<div title=“他们悬停的话”>悬停我</div>
或者:
<span title=“他们悬停的话”>悬停我</span>
title属性也适用于其他html元素,例如链接…
<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
这也可以在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 >
(显然,样式可以改进)
您正在寻找工具提示
对于基本的工具提示,您需要:
<div title="This is my tooltip">
对于一个更花哨的javascript版本,你可以查看:
http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632
上面的链接提供了12个工具提示选项。