添加文本后按钮背景图消失，如何实现悬停时背景与文本切换效果？

问题说明 #

需要实现以下按钮交互效果：

• 初始状态：文本隐藏，背景图完全显示（不透明）
• 鼠标悬停时：按钮背景变为黑色，文本淡入显示，同时背景图淡出，所有变化带1秒过渡动画

之前的尝试存在以下问题：

• 文本放在.tablet内、#code_block外时，会和背景图并排显示，无法覆盖
• 文本放入#code_block内后，背景图直接消失
• 不清楚如何结合状态控制和过渡动画，实现悬停时的交替显示效果

解决方案 #

核心思路是让文本覆盖在背景图上方，通过父容器的悬停事件统一控制背景图和文本的状态，同时使用opacity而非display实现过渡动画（display属性无法触发CSS过渡）。

修正后的HTML代码 #

<div class="content_container">
    <div class="tablet">
        <div id="code_block"></div>
        <p id="text">Text</p>
    </div>
    <div class="tablet"></div>
    <div class="tablet"></div>
    <div class="tablet"></div>
</div>

修正后的CSS代码 #

.content_container {
    display: flex;
    justify-content: space-evenly;
}
.tablet {
    display: inline-flex;
    margin-top: 5vh;
    position: relative; /* 让内部绝对定位元素以该容器为基准 */

    /* 尺寸约束 */
    height: var(--medium);
    max-height: var(--med-ub);
    min-height: var(--med-small-lb);
    width: var(--med-large);
    max-width: var(--med-large-ub);
    min-width: var(--med-large-lb);

    /* 边距 */
    margin-right: 1vw;
    margin-left: 1vw;

    background-color: var(--primary_colour);
    border: solid 1px var(--tirtiary_colour);
    border-radius: 1vw;
    transition: all 1s ease; /* 统一过渡动画 */
}
#code_block {
    width: 100%;
    height: 100%;
    opacity: 1;
    background-image: url("img/code_pic.png");
    background-color: rgba(0,0,0,0.5);
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity 1s ease;
}
.tablet:hover {
    width: var(--large);
    height: var(--medium);
    background-color: #000; /* 悬停时背景变黑 */
}
.tablet:hover #code_block {
    opacity: 0; /* 悬停时背景图淡出 */
}
#text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 居中显示 */
    margin: 0;
    opacity: 0;
    visibility: hidden; /* 初始隐藏，不占据空间 */
    transition: opacity 1s ease, visibility 1s ease;
    color: #fff; /* 根据需要设置文本颜色，确保在黑色背景上可见 */
}
.tablet:hover #text {
    opacity: 1; /* 悬停时文本淡入 */
    visibility: visible;
}

关键修改说明 #

1. 容器定位：给.tablet添加position: relative，让内部的文本可以通过position: absolute居中覆盖在背景图上方。
2. 背景图占满容器：给#code_block设置width: 100%; height: 100%;，确保它完全填充.tablet容器。
3. 文本过渡控制：初始时文本设置opacity: 0和visibility: hidden，既隐藏又不占空间；悬停时通过父容器的hover事件触发文本的opacity: 1和visibility: visible，实现淡入效果。
4. 统一悬停触发：所有交互效果都通过.tablet:hover触发，确保鼠标放在按钮任意位置都能触发状态变化，避免单独元素hover的局限性。
5. 过渡动画优化：统一设置过渡属性，确保所有变化都有平滑的1秒动画。

内容的提问来源于stack exchange，提问作者Bradley Broughton