鼠标悬停slide-image时如何同步改变文本颜色？CSS容器悬停需求

当鼠标悬停wpcp-slide-image元素时，已通过伪元素实现背景层从下往上铺满的过渡效果，但需要同步改变元素内的文本颜色，该如何实现？

现有CSS代码：

.wpcp-slide-image::before {
    content:"";
    position: absolute;
    top:0px;
    left: 0px;
    opacity: 0.7 !important;
    background-color: #ff613c;
    width: 100%;
    height: 0%;
    transition: height 0.15s ease-in;

}

.wpcp-slide-image:hover::before{
    height: 100% !important;
}

效果需求：悬停时背景层铺满元素的同时，内部文本颜色同步切换（如从深色变为白色）

只需在原有代码基础上添加文本颜色的过渡样式，同时确保文本层级高于伪元素即可，步骤如下：

1. 给父元素wpcp-slide-image设置相对定位，确保伪元素和内部文本的定位基准正确：

.wpcp-slide-image {
    position: relative;
}

2. 给内部文本元素（假设文本容器类为slide-text）添加层级和过渡效果：

.wpcp-slide-image .slide-text {
    position: relative;
    z-index: 1; /* 确保文本在伪元素上方，不被遮挡 */
    transition: color 0.15s ease-in; /* 和背景动画时长一致，保持同步 */
}

3. 给父元素的hover状态添加文本颜色变化：

.wpcp-slide-image:hover .slide-text {
    color: #ffffff; /* 替换为你需要的目标颜色 */
}

整合后的完整CSS代码：

.wpcp-slide-image {
    position: relative;
}

.wpcp-slide-image::before {
    content:"";
    position: absolute;
    top:0px;
    left: 0px;
    opacity: 0.7 !important;
    background-color: #ff613c;
    width: 100%;
    height: 0%;
    transition: height 0.15s ease-in;
}

.wpcp-slide-image:hover::before{
    height: 100% !important;
}

.wpcp-slide-image .slide-text {
    position: relative;
    z-index: 1;
    transition: color 0.15s ease-in;
    color: #333333; /* 默认文本颜色 */
}

.wpcp-slide-image:hover .slide-text {
    color: #ffffff; /* 悬停后的文本颜色 */
}

注意事项 #

• 如果你的文本没有单独容器，可使用.wpcp-slide-image:hover *来选择所有子元素，但更推荐给文本单独加类，避免影响其他元素
• 过渡时长保持和背景动画一致，视觉体验更流畅
• 伪元素默认层级低于设置了position: relative且z-index>0的元素，无需额外调整伪元素的z-index

内容的提问来源于stack exchange，提问作者Sikander khalil