将鼠标悬停在文本上时显示图像

Question

当您将鼠标悬停在跨度标签上时，我试图显示图片。我在网上查了一下，但我发现的东西不起作用。我现在结束了这段代码：

 <span style="display:inline-block;">
 <img class="manImg" src="_src/mypicture.jpg">
</span>

…问题是将“悬停”文本放在哪里。当我将鼠标悬停在该文本上时，它将显示图像。

原文由 Benito 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

img { display: none; }
.parent:hover img { display: block; }

例子

原文由 amflare 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你只能通过 css 来做到这一点。

 <span class="container">
  <p class="hover-text">Hover text here</p>
 <img class="manImg" src="_src/mypicture.jpg">
</span>

.container {
  display: inline-block;
}
.manImg {
  display: none;
}
.hover-text:hover ~ .manImg {
  display: block;
}

原文由 Vaibhav Kumar 发布，翻译遵循 CC BY-SA 3.0 许可协议