根本原因是css:hover作用域过窄或预览元素脱离文档流；应将预览图设为触发元素的兄弟节点并用+选择器控制显隐，复杂场景需js动态定位，移动端必须降级为click触发。
hover 触发时图片预览不显示或闪退
根本原因通常是 CSS 的 :hover 作用域太窄，或者预览元素被意外脱离文档流。比如把预览 <img> 放在触发链接内部，又设了 position: absolute 但没配 z-index 和父容器 position: relative，鼠标一移过去就脱离 hover 区域，导致反复触发/消失。
稳妥做法是让预览图作为兄弟节点紧跟触发元素，并用 CSS 控制显隐：
<a href="#" class="preview-trigger">查看示意图</a>
@@##@@
.preview-image {
display: none;
position: absolute;
top: 24px;
left: 0;
max-width: 300px;
z-index: 1000;
}
.preview-trigger:hover + .preview-image {
display: block;
}
- 必须确保
.preview-image紧跟在触发元素之后（兄弟选择器+才生效） - 若触发元素是
<span></span>或内联元素，需给它加display: inline-block，否则position: absolute的预览图可能定位错乱 - 不要用
visibility: hidden替代display: none—— 前者仍占布局空间，可能遮挡下方可点击区域
需要支持任意位置、避免被裁剪
编辑器里内容区域常带 overflow: hidden 或滚动容器，绝对定位的预览图容易被截断。不能只靠 top/left 写死，得动态计算位置。
纯 CSS 方案受限，这时要用 JS 监听 mouseenter，读取触发元素 getBoundingClientRect()，再设置预览图 style.top 和 style.left：
const trigger = document.querySelector('.preview-trigger');
const preview = document.querySelector('.preview-image');
trigger.addEventListener('mouseenter', (e) => {
const rect = e.target.getBoundingClientRect();
preview.style.display = 'block';
preview.style.top = `${rect.bottom + 4}px`;
preview.style.left = `${rect.left}px`;
});
trigger.addEventListener('mouseleave', () => {
preview.style.display = 'none';
});
- 用
mouseenter/mouseleave而非mouseover/mouseout，避免子元素冒泡干扰 - 计算位置时优先用
rect.bottom+ 偏移，比固定top: 100%更可靠，尤其当触发元素有 padding/margin 时 - 如果编辑器内容在 iframe 或 shadow DOM 里，
getBoundingClientRect()返回的是相对于该上下文的坐标，需额外转换
编辑器中图片路径失效或跨域加载失败
HTML 编辑器常运行在本地文件（file:// 协议）或沙盒环境，直接写相对路径如 ./assets/chart.png 可能 404；更麻烦的是，部分编辑器会自动转义 src 值，或对图片 URL 做安全过滤。
验证和绕过方法：
- 先在控制台手动执行
document.querySelector('.preview-image').src，看输出是否是你预期的完整 URL —— 如果是空或变成about:blank，说明被编辑器拦截了 - 尝试用 base64 内联小图：
src="data:image/png;base64,iVBOR..."，绕过路径解析问题 - 若必须用外部地址，且编辑器支持自定义属性，可把真实路径存到
data-real-src，JS 中读取后赋给preview.src - 遇到
CORS错误（如控制台报Blocked by CORS policy），不是前端能解决的，得确认图片服务是否允许当前域名跨域，或改用代理
移动端无法触发 hover 效果
手机浏览器没有“悬停”概念，:hover 伪类在 iOS Safari 和 Android Chrome 上默认不触发，或仅在点击后短暂生效，完全不可靠。
必须降级为点击触发，且要兼顾桌面端体验：
let isTouch = 'ontouchstart' in window;
const eventIn = isTouch ? 'click' : 'mouseenter';
const eventOut = isTouch ? 'click' : 'mouseleave';
trigger.addEventListener(eventIn, showPreview);
trigger.addEventListener(eventOut, hidePreview);
// 点击时，若已展开则收起，实现 toggle
function showPreview() {
if (preview.style.display === 'block') {
preview.style.display = 'none';
} else {
// ...定位逻辑
preview.style.display = 'block';
}
}
- 别用
Modernizr或 UA 判断，'ontouchstart' in window更轻量、更准确 - 移动端点击预览图本身也应关闭它，否则用户点开后无法关闭，这是最常被忽略的交互断点
- 如果编辑器内容区域禁用了
pointer-events（例如某些富文本框为防误操作设了pointer-events: none），hover 和 click 都会失效，得检查并覆盖该样式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
