基本上，當我懸停時，我希望效果如下所示：
我的網站在這裡
程式碼如下忽略！重要：
.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;
}
出於某種原因，我無法讓藍色按鈕與紅色按鈕重疊。想不通
交換
.cta-button-menu:hoversetbackground: #e72f54和.cta-button-menu:hover::beforesetbackground-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！重要； 邊框：無！重要； }＃＃＃＃＃＃現在預訂＃＃＃＃＃-