hover时文字不显示，需检查display与visibility区别：display:none使元素脱离文档流，visibility:hidden保留占位但不可见；推荐用visibility: hidden + opacity: 0组合配合transition实现可控淡入效果。
hover 时文字不显示？检查 display 和 visibility 的区别
悬停显示文字最常见的失败原因是误用 display: none 和 visibility: hidden。前者会让元素完全脱离文档流，后者保留占位但不可见。如果用 display: none，:hover 触发时即使设为 block，也可能因父容器尺寸未预留空间导致文字“闪一下就消失”或位置错乱。
推荐统一用 visibility + opacity 组合，更可控：
.img-container {
position: relative;
display: inline-block;
}
.img-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
color: white;
padding: 8px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
}
.img-container:hover .img-caption {
visibility: visible;
opacity: 1;
}
-
visibility控制是否参与渲染布局，必须设为visible才能触发动画 -
opacity控制透明度，配合transition实现淡入效果 - 不要只靠
display切换，否则transition对display无效
图片和文字重叠错位？确认 position 层级关系
文字盖不住图片，或者飘到页面其他位置，基本是定位没套对。关键点：文字容器必须是图片容器的直接子元素，且图片容器需设 position: relative，文字容器设 position: absolute。
错误写法（文字脱离图片上下文）：
@@##@@<div class="img-caption">说明文字</div>
正确结构：
<div class="img-container"> @@##@@ <div class="img-caption">这是说明文字</div> </div>
- 绝对定位的
.img-caption是相对于最近的position: relative祖先计算的，不是整个页面 - 如果图片外层没有包裹容器，就只能给
<img src="a.jpg">自身加position: relative，但部分浏览器对替换元素（如 img）设 relative 支持不稳定 - 务必加
z-index（比如z-index: 1）确保文字在图片上方
移动端 hover 不生效？别依赖 :hover 做核心交互
手机和平板上没有鼠标悬停概念，:hover 在触摸设备上行为不一致：有的点击后触发一次，有的完全不触发，有的延迟响应。这不是 bug，是规范行为。
如果只是辅助说明，可以保留 :hover；但如果文字是关键信息（比如操作提示、功能解释），必须提供降级方案：
- 用
@media (hover: hover) and (pointer: fine)包裹 hover 样式，仅对支持悬停的设备启用 - 同时在 HTML 中默认显示简短文字（如 title 属性或
<figcaption></figcaption>），保证无 hover 时仍可读 - 避免用纯 CSS 实现“悬停才出现按钮”这类功能，该用 JS 绑定
touchstart或click代替
文字被截断或换行异常？留意 white-space 和 max-width
长说明文字在小图上挤成一团、超出边界、或强制单行截断，往往是因为没控制文本行为。
常见修复方式：
.img-caption {
white-space: normal; /* 允许换行 */
word-break: break-word; /* 中文/长单词自动折行 */
max-width: 100%; /* 防止撑宽容器 */
text-align: center;
}
-
white-space: nowrap是默认值之一，会导致文字溢出而非换行 - 如果图片宽度动态变化（比如响应式布局），
max-width: 100%比固定像素更安全 - 英文长链接或技术字符串建议加
overflow-wrap: break-word兼容老浏览器
实际调试时，打开浏览器开发者工具，悬停后检查元素是否被 display: none 或 visibility: hidden 锁死，再看 computed 样式里 position 和 z-index 是否符合预期——很多问题当场就能定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
