添加悬停文本而不使用javascript,就像我们悬停用户的声誉一样


262

在stackoverflow中,当我们将鼠标悬停在用户的声誉上时,会看到一条文本。我已经在很多地方看到了这一点,源代码告诉我,无需js即可完成。我试过了,只有这个

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

Answers:


495

使用title属性,例如:

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

要么:

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


3
就像我们悬停在用户声誉
Ash Ash

1
是的,如果您查看信誉的源代码,则会看到title属性设置为reputation score
gcochard 2012年

6
@Kevin实际上,此解决方案比JavaScript解决方案更好,因为它可以在禁用了JavaScript的浏览器上使用,并且还向屏幕阅读器提供有关元素内容的提示。
gcochard

1
@KevinMeredith我要说的是,JS解决方案更好的唯一方法是,您不能对显示和保留的文本进行样式设置,而仅使用本机实现。
zero298 2014年

1
@David d C e Freitas:谢谢您通过编辑此答案来增亮StackOverflow ...不知道如何实际标记您,但是很好
Meredith

16

title属性也可以与其他html元素一起很好地工作,例如链接...

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.