CSS中,hover是一種非常常用的偽類,它可以讓你在鼠標懸停在某個元素上時改變它的樣式。在編寫CSS時,你可以使用hover來創建很多不同的效果。
/* 創建按鈕 */ 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; cursor: pointer; } /* hover效果 */ button:hover { background-color: #3e8e41; /* 深綠色 */ }
在上面的代碼中,我們創建了一個按鈕的樣式,并為它設置了綠色的背景色。當鼠標懸停在按鈕上時,我們使用:hover偽類選擇器,來設置不同的樣式,這里改變了背景色為深綠色。
除了改變背景色之外,我們還可以使用:hover來改變其他CSS屬性,例如文字顏色、邊框顏色等等。下面是另一個示例:
/* 創建鏈接 */ a { color: #337ab7; /* 藍色 */ text-decoration: none; } /* hover效果 */ a:hover { color: #23527c; /* 深藍色 */ text-decoration: underline; }
在這個示例中,我們創建了一個藍色鏈接,并為它設置了無下劃線的樣式。當鼠標懸停在鏈接上時,我們使用:hover偽類選擇器來改變鏈接的顏色,并設置下劃線。
總而言之,hover偽類是一個非常強大的工具,它可以讓你在網站設計中創建許多不同的效果,只需要在CSS中應用它即可。
下一篇mysql怎么看用戶名