CSS(層疊樣式表)是一種用來描述網頁樣式的語言,包括布局、顏色、字體、間距等等,其中有個魔力的屬性就是“hover”,鼠標放上就能改變元素的樣式。
選擇器:hover { 屬性: 值; }
這里的選擇器可以是任何CSS選擇器,例如標簽選擇器、類選擇器、ID選擇器,甚至是偽元素選擇器。hover屬性的值也可以是任何CSS屬性,比如color、background-color、border等等。
hover屬性可以給網頁添加更加生動的視覺效果,例如鼠標放上去圖片變亮、文字變色、按鈕顯示動畫效果等等。
.button { background-color: blue; color: white; padding: 10px 20px; border-radius: 5px; } .button:hover { background-color: white; color: blue; box-shadow: 0px 0px 10px blue; transition: all 0.3s ease-in-out; }
這是一個例子,當鼠標放在一個按鈕上時,它的顏色、背景色、陰影都會產生動畫效果,讓頁面更加生動有趣。
總的來說,hover屬性是CSS中非常強大的屬性之一,可以大大增加頁面的互動性和可視化效果,值得加入到日常的網頁開發之中。