在鼠标悬停时显示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/