使用 Psuedo 元素的 CSS 懸停效果與主元素重疊

Question

基本上，當我懸停時，我希望效果如下所示：

我的網站在這裡

程式碼如下忽略！重要：

.cta-button-menu, .cta-button-menu::before {
        transition:all 0.3s linear !important;
        width: 120px !important;
        height: 50px !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .cta-button-menu:hover {
        transform:rotateZ(-45deg) !important;
        background: #21B6CD !important;
        color: white !important;
    }
    .cta-button-menu::before {
        content:"Book Now" !important;
        background-color:transparent !important;
        position:absolute !important;
        @include main-font($white, 16px !important, $font-bold !important);
      }
    .cta-button-menu:hover::before{
        transform: rotateZ(90deg) !important;
        background-color:#e72f54 !important;
        border:none !important;
    }

出於某種原因，我無法讓藍色按鈕與紅色按鈕重疊。想不通

Answer 1

交換.cta-button-menu:hover set background: #e72f54 和 .cta-button-menu:hover::before set background-color:#21B6CD 中的顏色。而且還要改變度數。希望這對你有用

ul {
上邊距：60px；
}
.cta-按鈕選單，
    .cta-按鈕-選單::之前{
      過渡：全部 0.3 秒線性！重要；
      寬度：120px！重要；
      高度：50px！重要；
      顯示：inline-flex！重要；
      調整內容：居中！重要；
      對齊項目：居中！重要；
    }

    .cta-按鈕選單：懸停{
      變換：rotateZ(45deg)！重要；
      背景：#e72f54！重要；
      顏色：白色！重要；

    }

    .cta-按鈕-選單::之前{
      內容：「立即預訂」！重要；
      背景顏色：透明！重要；
      位置：絕對！重要；
      @include main-font($white, 16px !重要, $font-bold !重要);
    }

    .cta-button-menu:hover::之前{
      變換：rotateZ(-90deg)！重要；
      背景顏色：#21B6CD！重要；
      邊框：無！重要；

    }

＃＃＃＃＃＃現在預訂＃＃＃＃＃