Html 数据悬停在图像上时不显示

我在一个公文包网站上工作，希望鼠标悬停在图像（拇指和原始图像）上时，数据悬停信息显示在左下角（我知道我还没有为此编写代码，因为我根本没有让它显示出来！）。 我尝试了数据标题，并获得了显示的信息，但我不认为我可以将其样式化到角落。谢谢你抽出时间！ 最好的， JTE

.container2{
溢出：可见；
位置：相对位置；
}
.集装箱2李{
位置：绝对位置；
z指数：1；
}
.集装箱2李a{
显示：块；
填充：0；
边界：0；
}
.container2 li img{
保证金：0；
填充：0；
大纲：0；
}
.集装箱2.悬停{
显示：块；
填充：0；
边界：0；
}
a:悬停，
a:焦点{
大纲：无；
}
答：林克，
答:访问,，
a:悬停{
颜色：#000；
文字装饰：无；
}
a:悬停{
边框底部：1px实心#000；
填充：0；
}

当链接悬停时，显示绝对定位的伪元素（

：：before

），并从

属性（数据悬停）

获取其

内容

：

.container2{
溢出：可见；
位置：相对位置；
}
.集装箱2李{
位置：绝对位置；
z指数：1；
}
.集装箱2李a{
显示：块；
填充：0；
边界：0；
}
.container2 li img{
保证金：0；
填充：0；
大纲：0；
}
.集装箱2.悬停{
显示：块；
填充：0；
边界：0；
}
a{
位置：相对位置；
}
a:悬停，
a:焦点{
大纲：无；
}
答：林克，
答:访问,，
a:悬停{
颜色：#000；
文字装饰：无；
}
a:悬停{
边框底部：1px实心#000；
填充：0；
}
a:悬停：：之前{
位置：绝对位置；
底部：0；
右：0；
颜色：银色；
内容：attr（数据悬停）；
}