在CSS中,我們經常會想要將鼠標懸停在按鈕上時使其保持不變。這需要使用一些特殊的樣式,特別是利用“偽類”來實現。下面是一些示例代碼來實現懸停按鈕不變:
/* 基本樣式 */ .my-button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; } /* 懸停樣式 */ .my-button:hover { background-color: #3e8e41; cursor: pointer; } /* 懸停不變樣式 */ .my-button:active { background-color: #3e8e41; box-shadow: 0 5px #666; transform: translateY(4px); } /* 禁用樣式 */ .my-button.disabled { background-color: gray; cursor: not-allowed; }
上述示例代碼中,我們首先定義了一個名為 .my-button 的基本樣式,包括按鈕的背景色、邊框、顏色、內邊距、文本對齊方式、字體大小等。然后我們使用偽類 :hover 定義了鼠標懸停樣式,將背景色改為了深綠色,鼠標變為手形。接著,我們使用偽類 :active 定義了鼠標按下樣式,將背景色和按鈕下方的陰影進行了改變,同時將按鈕向下平移了一定距離。最后,我們在需要禁用按鈕時,可以使用類名 .disabled 來控制按鈕的背景色和鼠標指針的形狀。
通過上述示例代碼,我們可以輕松地實現按鈕懸停時不發生變化的效果,并在需要時禁用按鈕,提高用戶體驗。希望這些示例代碼對你有所幫助!