HTML鼠标悬停显示大图：缩略图预览实现

先明确一个核心原则：真正可用的大图预览，关键在于“替换”高清图，而不是简单“拉伸”缩略图。很多新手会直接给缩略图加一个 transform: scale()，这其实是个误区。你猜怎么着？它只是把原图的像素强行拉大了，分辨率没变，细节也没增加，结果就是图片边缘模糊、文字发虚，体验很差。

所以，靠谱的方案是准备两张图：一张低分辨率的缩略图，一张高分辨率的大图。悬停时，让高清大图平滑地替换显示出来，这才是真正的预览。

为什么不能用 CSS 直接放大缩略图？

前面提到了，直接给 标签加 transform: scale(2) 这类属性，本质上只是视觉上的放大，图像数据本身并没有变。这对于小图标或者带文字的图片来说，效果尤其糟糕，会显得非常模糊。这根本不是“预览大图”，只是“放大了一张小图”而已。

正确的思路很清晰：

• 缩略图：使用低清图（比如 thumb.jpg），并通过 CSS 设置固定的 width 和 height（例如 120px）。
• 大图：使用高清原图（比如 full.jpg），不在标签上设置宽高，而是通过外层容器来约束其最大尺寸。
• 布局核心：用一个 position: relative 的容器包裹缩略图，这样大图就可以用 position: absolute 精准定位在它旁边或下方。

别指望 title 属性，它只是个简单的提示

有些同学可能会想，给图片加个 title 属性是不是就行了？答案是：完全不行。title 是浏览器自带的原生提示框，只能显示纯文本，你无法控制它的样式、尺寸、位置，更别说在里面显示图片了。而且在移动端，它的触发行为也很不稳定。所以，它只能作为辅助信息补充，不能作为大图预览的解决方案。

要实现一个样式可控、体验良好的浮层，必须借助额外的 DOM 结构和 CSS：

• 在缩略图外面套一个容器，比如
  。
• 容器里面同时放置缩略图和隐藏的高清大图 。
• 通过CSS选择器 .preview-container:hover .big-preview 来控制大图的显示和隐藏。
• 这里有个技巧：隐藏时不要用 display: none，因为它会打断CSS过渡动画。应该使用 opacity: 0 配合 visibility: hidden，这样就能实现淡入淡出的平滑效果了。

纯CSS够用吗？小心多个预览图打架

如果页面上只有一个缩略图，上面的纯CSS方案非常完美。但问题来了，当多个缩略图并排时，所有的大图默认都会叠在同一个位置（通常是容器的左上角），这就乱套了。

解决思路其实很轻量：为每个大图单独设置定位。一个常见的做法是，让大图定位在对应缩略图的下方，再用一点 translate 做微调。

.preview-container {
  position: relative;
  display: inline-block;
}
.preview-container .big-preview {
  position: absolute;
  top: 100%; /* 定位到缩略图底部 */
  left: 0;
  margin-top: 8px; /* 加一点间距 */
  max-width: 300px; /* 控制大图最大宽度 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.preview-container:hover .big-preview {
  opacity: 1;
  visibility: visible;
}

当然，如果缩略图靠近屏幕右侧，大图可能会超出视口边界。对于这种边缘情况，更严谨的做法是用 JavaScript 动态计算位置（比如用 getBoundingClientRect() 判断，然后动态切换为 right: 0）。不过，在大多数常规布局下，通过 max-width 和 margin 调整已经足够应对了。

移动端怎么办？hover 失灵了

移动端（iOS和Android）默认没有鼠标悬停（hover）这个概念，点一下相当于“激活”，再点一下才可能“取消”。直接用 :hover 会导致体验很奇怪。

一个巧妙的解决方案是利用 :focus-within 这个CSS伪类：

• 把缩略图包裹在一个 里，并给按钮设置 position: relative。
• 大图依然放在按钮内部。
• 通过 button:focus-within .big-preview 这个选择器，在按钮获得焦点时（即被点击或触摸时）显示大图。
• 别忘了给按钮加上 tabindex="0"，确保键盘用户也能操作，兼顾可访问性。

好消息是，现代移动浏览器（包括iOS Safari和Android Chrome）对 :focus-within 的支持已经很好了，基本不需要额外补丁。

当然，如果产品需求是点击后跳转新页面或打开一个模态对话框来展示大图，那这就超出了纯CSS的范畴，需要绑定JavaScript的 click 事件来处理了。不过，那就是另一个故事了。