鼠标悬停在图片上方时，显示文字

步骤解释：‌

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选择器匹配，即可实现悬停图片显示文字的效果。