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

Question

基本的に、ホバーしたときの効果は次のようになります。 私の Web サイトのコードは次のとおりです。無視してください。重要: .cta-button-menu,.cta-button-menu::before{transition:all0.3slinear!重要;幅:120px!重要;高さ:50px!重要;表示:インラインフレックス!重要;justify-cont

P粉021708275 · Answer

交換 .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 !重要; 境界線: なし!重要; }

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