在網頁設計中,鼠標移入效果常常被用來增強用戶體驗。比如當用戶用鼠標懸停在一個鏈接上時,鏈接會發生變化,以提醒用戶該鏈接可點擊。那么我們該如何設置鼠標移入效果呢?
/* 樣式代碼開始 */ a:hover { /* a標簽在鼠標移入時觸發 */ color: red ; /* 鏈接文字變為紅色 */ text-decoration: underline ; /* 鏈接下劃線顯示 */ } button:hover { /* button標簽在鼠標移入時觸發 */ background: #4298d7 ; /* 按鈕背景色變為深藍 */ color: white ; /* 按鈕文字變為白色 */ } img:hover { /* img標簽在鼠標移入時觸發 */ opacity: 0.8 ; /* 圖片透明度變為0.8 */ box-shadow: 1px 1px 3px #999 ; /* 圖片陰影效果 */ } /* 樣式代碼結束 */
在上面的代碼中,我們使用了:hover偽類來表示鼠標移入的效果。當鼠標移入相應的元素(如、
總之,通過設置:hover偽類,我們可以輕松地為網頁添加鼠標移入效果,從而提升用戶的體驗感。
上一篇css如何設置div底部
下一篇ajax如何實現簡單分頁