本文详解如何使用纯 css 实现图片上的可悬停热点（spot）标注效果，支持高亮缩放、动态连接线绘制及精准定位，无需 javascript 即可完成响应式交互体验。
本文详解如何使用纯 css 实现图片上的可悬停热点（spot）标注效果，支持高亮缩放、动态连接线绘制及精准定位，无需 javascript 即可完成响应式交互体验。
在图像标注、产品交互导览或数据可视化场景中，常需在静态图片上添加可交互的“热点”（spots）——即悬浮时高亮目标区域并延伸出引导线指向说明内容。本文提供一种零 JS、纯 CSS 驱动的轻量级实现方案，兼顾语义清晰性、定位精度与视觉反馈。
核心思路
利用绝对定位的 .dome-icon 元素作为热点容器，叠加在背景图之上；通过 :hover 触发两个关键行为：
- 图标缩放增强：scale(1.2) + 平滑过渡，强化视觉焦点；
- 动态连接线显示：借助伪元素 ::after 绘制细线（height: 2px），通过 opacity 控制显隐，并用 transform（如 rotate、translate）和 top/left 精确控制起始/延伸方向。
完整实现代码
<div class="dome">
<div class="dome-icon">
<img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="Feature A">
</div>
<div class="dome-icon">
<img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="Feature B">
</div>
</div>.dome {
background: url(https://www.zdnet.com/a/img/resize/ba1b1ab92085d777ab5e313b34c66a94b7aa1236/2023/06/05/79a43eb8-ce38-488c-8cc0-e04699aaca7f/bing.jpg) center/cover no-repeat;
height: 200px;
width: 200px;
margin: 0 auto;
position: relative; /* 关键：为子元素绝对定位提供参考 */
}
.dome-icon {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
transition: transform 0.3s ease;
}
.dome-icon img {
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 0.5s ease;
}
.dome-icon:hover img {
transform: scale(1.2);
}
.dome-icon:hover::after {
opacity: 1;
width: 210px; /* 连线长度 */
}
.dome-icon::after {
content: '';
position: absolute;
height: 2px;
background: #ffd503;
opacity: 0;
transition: opacity 0.3s, width 0.3s;
}
/* 热点 1：左上区域，水平向右连线 */
.dome-icon:nth-child(1) {
transform: translate(-113px, 61px); /* 相对 .dome 左上角偏移 */
}
.dome-icon:nth-child(1)::after {
top: 50%;
left: 100%; /* 从图标右侧中心出发 */
}
/* 热点 2：左下区域，倾斜向上连线 */
.dome-icon:nth-child(2) {
transform: translate(-120px, 132px);
}
.dome-icon:nth-child(2)::after {
top: 0;
left: 100%;
transform: rotate(-10deg) translateX(-10px); /* 微调起点位置 */
}注意事项与优化建议
- ✅ 定位基准：.dome 必须设 position: relative，否则 absolute 子元素将相对于文档流定位，导致错位；
- ✅ 响应式适配：若需适配不同尺寸图片，建议改用 background-size: contain + padding-bottom 百分比占位，或结合 @media 调整 transform 偏移值；
- ⚠️ 可访问性：为 .dome-icon 添加 aria-label（如 aria-label="Highlight: Processor"）并确保焦点可见（:focus-visible），提升键盘用户友好度；
- ? 扩展性：新增热点只需复制 <div class="dome-icon"> 并调整 nth-child(n) 的 transform 和 ::after 样式即可，逻辑解耦清晰。
该方案以最小技术栈达成专业级交互效果，适合嵌入文档、营销页或教学素材中，兼具性能优势与维护便利性。
