步骤解释：
HTML结构确认： 确保.header-image容器内直接包含img和span，且span紧跟在img之后。
HTML：
<div class="mb-3 header-image">
<img src="/files/images/touxiang_default.png" />
<span>点击更换</span>
</div>
CSS：
.header-image {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: relative;
}
.header-image > span {
display: none;
position: absolute; /* 子元素绝对定位 */
top: 50%; /* 向上移动50% */
left: 50%; /* 向左移动50% */
transform: translate(-50%, -50%); /* 向相反方向移动自身尺寸的50%以实现真正的居中 */
}
.header-image > img:hover + span {
display: inline-block;
}
其他情况处理：
如果span不是img的直接相邻兄弟，可使用通用兄弟选择器~：
css
Copy Code
.header-image > img:hover ~ span {
display: inline-block;
}
父级悬停触发： 若希望悬停在父容器时显示span，修改为：
css
Copy Code
.header-image:hover > span {
display: inline-block;
}
确保HTML结构与CSS选择器匹配，即可实现悬停图片显示文字的效果。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。