Psuedo 要素の CSS ホバー効果を使用してメイン要素をオーバーラップする

Question

基本的に、ホバーしたときの効果は次のようになります:

私のウェブサイトはここです

コードは次のとおりです無視してください!重要＃＃＃：＃＃＃ .cta-button-menu、.cta-button-menu::before { トランジション:すべて 0.3 秒のリニア !重要; 幅: 120px !重要; 高さ: 50px !重要; 表示: インラインフレックス !重要; justify-content: 中央 !重要; align-items: 中央に配置 !重要; } .cta-button-menu:hover { 変換:回転Z(-45度) !重要; 背景: #21B6CD !重要; 色: ホワイト!重要; } .cta-button-menu::before { content:「今すぐ予約」 !重要; 背景色:透明 !重要; 位置:絶対!重要; @include main-font($white, 16px !重要, $font-bold !重要); } .cta-button-menu:hover::before{ 変換: 回転 Z(90 度) !重要; 背景色:#e72f54 !重要; 境界線:なし!重要; }

何らかの理由で、青いボタンを赤いボタンに重ねることができません。理解できません

Answer 1

交換 .cta-button-menu:hover set background: #e72f54 と .cta-button-menu:hover::before set background-color:#21B6CD の中の色。また、変更数も変更する必要があります。これが役立つことを願っています。

ul { マージントップ: 60px; } .cta-ボタン-メニュー、 .cta-button-menu::before { トランジション: すべて 0.3 秒の直線的!重要; 幅: 120px !重要; 高さ: 50px !重要; 表示: インラインフレックス !重要; justify-content: 中央 !重要; align-items: 中央に配置 !重要; } .cta-button-menu:hover { 変換: 回転 Z(45 度) !重要; 背景: #e72f54 !重要; 色: ホワイト!重要; } .cta-button-menu::before { 内容: 「今すぐ予約」 !重要; 背景色: 透明 !重要; 位置: 絶対 !重要; @include main-font($white, 16px !重要, $font-bold !重要); } .cta-button-menu:hover::before { 変換: 回転 Z(-90 度) !重要; 背景色: #21B6CD !重要; 境界線: なし!重要; }

＃＃＃＃＃＃今予約する＃＃＃＃＃＃