hover时间线图形元素时展示图文，图片无法显示该如何解决？

云原生阿岚

2026-9-23

问题排查与修复方案

你遇到的图片无法正常显示问题主要由3个可调整的点导致，调整后即可正常实现hover圆点弹出图文的效果：

绝对定位的弹出层默认没有限制宽度，图片设置width: auto时会因为父容器宽度计算异常被压缩
当前.reference是100px的色块，可直接调整为时间线圆点样式更匹配你的需求
可补充弹出层的定位偏移、最大宽度限制，避免图文溢出或位置异常

修复后完整代码

/* 调整为时间线圆点样式 */
.reference {
  position: relative;
  background: tomato;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
}

.popout-menu {
  position: absolute;
  visibility: hidden;
  /* 调整位置：圆点右侧偏移10px，和圆点垂直居中对齐 */
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  color: #333;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  /* 限制弹出层最大宽度，避免太宽影响展示 */
  max-width: 320px;
  z-index: 99;
}

.reference:hover>.popout-menu,
.reference:focus>.popout-menu,
.reference:focus-within>.popout-menu {
  visibility: visible;
}

/* 固定图片最大宽度，高度自适应避免变形 */
.popoutimg {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 8px;
}

<div class="reference" tabindex="0">
  <div class="popout-menu">
    <img src="你的事件图片地址" alt="事件描述" class="popoutimg">
    <p>这里填写对应事件的文字说明，比如「2020.05.20 第一次约会」</p>
  </div>
</div>