ユーザーの評判にホバーするように、JavaScriptなしでホバーテキストを追加します


262

stackoverflowでは、ユーザーの評判にカーソルを合わせると、テキストが表示されます。私は多くの場所でこれを見てきましたが、ソースコードはそれがjsなしで実行できることを教えてくれます。そして私はこれだけを試してみました-

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

回答:


495

titleたとえば、属性を使用します。

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

または:

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


3
ユーザーの評判にカーソルを合わせるときと同じ
Ash

1
はい、レピュテーションのソースコードを見ると、title属性がに設定されていることがわかりますreputation score
gcochard 2012年

6
@Kevinこのソリューションは、JavaScriptが無効になっているブラウザーでも機能するため、実際にはJavaScriptソリューションよりも優れています。また、要素のコンテンツに関するヒントをスクリーンリーダーに追加します。
gcochard 2013

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>

15

多くの場合、私はこの状況で略語のhtmlタグに手を伸ばします。

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

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


7
その要素は略語を示すために使用されることを特に意図しているので、これは良い考えではありません。あなたは、テキストを音声に変換するシステムにそれを略語として発音するように言っています。<span>ホバーテキストだけが必要な場合に使用します。
Lars Marius Garshol

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.