css - 悬停效果显示图像

Question

有什么方法可以将鼠标悬停在文本上并显示图像。例如，我的名字是 ABC 和我在 DGF 中的国家，所以当有人将鼠标悬停在 ABC 或 DGF 上时，将显示一个图像。

像这样的东西，但它在我的网页中不起作用。

Answer 1

默认情况下隐藏图像#show-img，然后使用:hoverpsedo 类将显示更改为块，如下所示

#show-img {
    color: red;
    cursor: pointer;
    position: relative;
    text-transform: uppercase;   
}

#show-img img{
    display: none;
    position: absolute;
    top: 10px;
}

#show-img:hover img {
    display: block;
}

演示：小提琴

Answer 2

HTML

<div class="example">
  Hover over me
  <img src="example.com">
</div>

CSS

.example img {
  display: none;
}
.example:hover img {
  display: inline;
}