CSS伪元素悬停效果问题：主元素无法覆盖伪元素

AI 小北

2026-8-6

实现蓝色按钮悬停覆盖红色伪元素的解决方案

你需要实现鼠标悬停时蓝色主按钮覆盖红色::before伪元素的交互效果，但现有CSS代码无法达成这一目标。

问题核心原因

当前代码存在两个关键问题：

主按钮.cta-button-menu未设置position: relative，导致伪元素的绝对定位脱离按钮容器，位置与层级关系混乱
未通过z-index明确主按钮与伪元素的层级优先级，hover时蓝色按钮无法覆盖红色伪元素

修改后的CSS代码

.cta-button-menu, .cta-button-menu::before {
    transition: all 0.3s linear;
    width: 120px;
    height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.cta-button-menu {
    position: relative; /* 让伪元素相对于按钮本身定位 */
    z-index: 1; /* 默认层级高于伪元素 */
}
.cta-button-menu:hover {
    transform: rotateZ(-45deg);
    background: #21B6CD;
    color: white;
    z-index: 2; /* hover时提升层级，确保覆盖伪元素 */
}   
.cta-button-menu::before {
    content: "Book Now";
    background-color: transparent;
    position: absolute;
    z-index: 0; /* 伪元素层级低于主按钮 */
    transform-origin: center center; /* 确保旋转以按钮中心为原点 */
    @include main-font($white, 16px, $font-bold);
}
.cta-button-menu:hover::before {
    transform: rotateZ(90deg);
    background-color: #e72f54;
    border: none;
}