Html 将图像背景放在图像的标题上

我创建了一个示例图像，悬停时有一个图像标题。我希望标题有一个背景图像，里面是文本，如下所示：

HTML

---

示例

如果图像将

指针向下按住

图像，则使用以下方法：

.footerimages{
    position: absolute;
    top: 100%;
}

注意：将

.footerimages

的父容器应用于除“static”以外的一些位置值。

您不能在

title

属性中包含图像，但可以使用CSS获得相同的效果

编辑我被纠正；您可以使用CSS使用

#div[title]

设置标题标签的样式。但是，浏览器仍然显示默认的工具提示

让我们把你的悬停图像称为“pop”。将鼠标悬停在第一张图像上时，#pop将显示在所需位置

 #pop{
background:red;
width:30px;
height:30px;
display:none;
position:absolute;
top:0;
left:29px;
border:2px solid black;
}
.footerimages img:hover + #pop{
display:block;
}

有用信息：我进行了快速搜索，找到了一种通过使用

数据

属性模拟工具提示的方法

例如，您可以使用

并将其命名为这样的样式：

a[数据标题]

---

看看第一个答案的评论，看看我在说什么。

看看IM使用基础出版社作为框架。创建自己的工具提示@ VitorinoFernandes谢谢。我想有人在这里有类似的问题：

.footerimages{
    position: absolute;
    top: 100%;
}

 #pop{
background:red;
width:30px;
height:30px;
display:none;
position:absolute;
top:0;
left:29px;
border:2px solid black;
}
.footerimages img:hover + #pop{
display:block;
}