css - マウスオーバー時に CSS 背景画像にヒントを表示する

Question

私は<span class="image">背景を持つを使用しています：

.image {
    background-image: url("image.jpg")
}

人々がこの画像の上にマウスを置いたときに、この画像にヒントを追加するにはどうすればよいですか?

これを達成するCSSの方法はありますか?

Answer 1

HTML タイトル属性を使用します。

<span class="image" title="This is a hint.">

Answer 2

コンテンツで何かを行うことができます:after：

.image:hover:after {
    content:"This is a hint";
}

デモ: http://jsfiddle.net/fXuSB/

ただし、このコンテンツは HTML の方が適している可能性があります (実際には、画像も同様である可能性があります)。title単純なデフォルトのツールチップ、またはおそらく次のようなものに属性を使用できます。

<span class="image">
    <span class="hint">This is a hint</span>
</span>​​​​

.image .hint {
    display:none;
}
.image:hover .hint {
    display:block;
}

デモ: http://jsfiddle.net/fXuSB/1/