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/