Question

我们是否有任何方式将鼠标悬停在TEXT上并显示图像。例如，我的名字是ABC和我在DGF的国家，所以当有人在ABC或DGF上盘旋时，会显示一张图片。

像this之类的东西，但它在我的网页上无效。

Answer 1

默认情况下隐藏#show-img内的图像，然后使用:hover伪类将显示更改为阻止，如下所示

#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;
}

演示：Fiddle

Answer 2

HTML

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

CSS

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

悬停效果显示图像

2 个答案: