CSS3 的a:hover
偽類是實現頁面交互效果的重要工具,它允許我們在鼠標移動到鏈接上時改變其樣式。
a:hover { color: red; text-decoration: underline; }
如上所示的代碼,當鼠標懸停在鏈接上時,將鏈接文字變為紅色并添加下劃線效果。
還可以通過transform
屬性實現更復雜的鼠標懸停效果,如:
a:hover { transform: rotate(360deg); }
當鼠標懸停在鏈接上時,鏈接文字將圍繞自身中心旋轉 360 度。
a:hover
偽類還可以用于實現圖標或按鈕的懸停效果:
.btn { background-color: #007bff; color: #fff; padding: 10px 20px; border-radius: 4px; } .btn:hover { background-color: #0062cc; cursor: pointer; }
如上所示的代碼,當鼠標懸停在按鈕上時,將按鈕背景顏色變為深藍色并添加光標指針效果。
總之,a:hover
偽類是實現頁面動態效果不可缺少的一部分,我們需要靈活使用它掌握網站交互設計的技巧。