CSS中有兩個偽類可以用來設置鼠標滑過和離開的樣式,分別是:hover和:mouseout。
/* 設置鼠標滑過時的樣式 */ a:hover { color: red; text-decoration: underline; } /* 設置鼠標離開時的樣式 */ a:mouseout { color: black; text-decoration: none; }
在上面的代碼中,我們使用了:hover來設置當鼠標滑過a標簽時的樣式,將文字顏色變為紅色,并添加下劃線。同樣地,我們也可以使用:mouseout來設置鼠標離開時的樣式,將文字顏色恢復為黑色,并取消下劃線。
除了a標簽外,還可以在其他元素上應用:hover和:mouseout偽類,讓用戶體驗更加友好。
/* 設置鼠標滑過時的樣式 */ button:hover { background-color: blue; color: white; } /* 設置鼠標離開時的樣式 */ button:mouseout { background-color: white; color: black; }
在上面的代碼中,我們使用:hover來設置當鼠標滑過button標簽時的樣式,將背景顏色變為藍色,并將文字顏色變為白色。當鼠標離開時,我們使用:mouseout來將背景顏色恢復為白色,并將文字顏色恢復為黑色。