用:hover控制文字显隐最简单：将图文置于同一容器，hover父元素再选中文字；需定位时设父relative、文字absolute；移动端应兼容:focus-within或改用点击交互。
用 :hover 直接控制文字显隐最简单
不需要 JavaScript，纯 CSS 就能实现：鼠标移到图片上时，让对应的文字变色、加粗或显示出来。关键在于把文字和图片放在同一个容器里，然后用 :hover 作用于父容器，再选中内部的文字元素。
常见错误是把文字和图片分开写在不同位置，导致 .img:hover + .caption 失效（因为不是相邻兄弟），或者用 img:hover .caption（但 img 里不能嵌套块级文字）。
推荐结构：
<div class="figure"> <img src="photo.jpg" alt="风景"> <div class="caption">这是黄山云海</div> </div>
对应样式：
立即学习“前端免费学习笔记（深入）”；
.figure .caption {
opacity: 0.6;
transition: opacity 0.2s;
}
.figure:hover .caption {
opacity: 1;
font-weight: bold;
}
想让文字“浮在图上”就得用定位
如果说明文字要叠在图片右下角、带半透明背景，就不能只靠默认流式布局。必须给父容器设 position: relative，再给文字设 position: absolute。
容易漏的点：
-
.figure必须有position: relative，否则absolute会相对于 body 定位 - 文字默认会撑开容器高度，加
top: auto; bottom: 0;才能固定在底部 - 没加
z-index时，文字可能被后续元素遮挡
示例：
.figure {
position: relative;
display: inline-block;
}
.figure .caption {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0,0,0,0.7);
color: white;
padding: 4px 8px;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s;
}
.figure:hover .caption {
opacity: 1;
}
多个图片共用一套样式，别用 ID 写死
用 class 而不是 id，否则每张图都要单独写一遍 CSS。更进一步，可以加 data 属性做微调：
- 用
data-align="top-left"控制文字位置 - 用
data-theme="light"切换深色/浅色文字背景 - 避免为每种组合写新 class，用属性选择器复用逻辑
比如：
.figure[data-align="top-right"] .caption {
top: 8px;
right: 8px;
bottom: auto;
}
移动端悬停失效？得兼容 touch 设备
iOS 和 Android 的大部分浏览器不触发 :hover，除非用户点过一次——这意味着纯 :hover 在手机上基本不可靠。真正可用的方案只有两个：
- 改用
:focus-within配合可聚焦元素（比如给<div class="figure"> 加 <code>tabindex="0"，再点它就能触发高亮） - 放弃悬停，改用点击展开（用
details/summary或 JS 切换 class） - 不处理移动端——很多图说本来就不适合小屏阅读，直接隐藏文字也合理
如果坚持用 hover，至少加个兜底：.figure:focus-within .caption, .figure:hover .caption { ... }，让键盘用户和部分触屏用户也能触发。
复杂点在于，你得判断这个“高亮”到底是装饰性交互，还是信息传达的关键路径——前者可以妥协，后者就得换方案。
