如何实现鼠标悬停在文字上时显示图片？现有代码不生效该如何解决？

• 原生CSS不支持嵌套规则，你代码中h1:hover { img { display : block; } }是Sass、Less等CSS预处理器的语法，浏览器无法直接识别解析。
• 你当前HTML结构中img是h1的相邻兄弟元素，不能直接通过h1选择器内部写img匹配到该元素，需要使用兄弟元素选择器。

方案1：不改动现有HTML结构 #

仅修改CSS部分即可实现效果，完整代码如下：

<h1>hi</h1>
<img src="你的图片路径">

<style>
img {
  display: none;
}
/* 匹配h1处于悬停状态时，紧跟在它后面的img元素 */
h1:hover + img {
  display: block;
}
</style>

方案2：调整HTML结构，选择逻辑更清晰 #

将img放到h1内部作为子元素，代码如下：

<h1>hi
  <img src="你的图片路径" alt="悬停展示的图片">
</h1>

<style>
h1 img {
  display: none;
}
h1:hover img {
  display: inline-block;
  /* 可自行添加定位、大小等样式控制图片显示位置 */
}
</style>

• 如果页面存在多个h1和img元素，建议给对应元素添加自定义类名来限定选择范围，避免误匹配其他元素，比如给触发悬停的h1加class="hover-text"，要显示的img加class="hover-img"，选择器写成.hover-text:hover + .hover-img即可。
• 注意填写正确的图片src路径，否则会出现加载失败的裂图。

内容的提问来源于stack exchange，提问作者seungki