鼠標動作在CSS中是一個常見的交互效果,可以用來增加頁面的友好性和用戶體驗。
/* 鼠標懸停效果 */ .element:hover { background-color: #ccc; } /* 點擊效果 */ .element:active { background-color: #aaa; } /* 鼠標移開效果 */ .element:focus { outline: none; } /* 彈出菜單 */ .menu { display: none; } .element:hover .menu { display: block; }
上述代碼展示了一些常見的鼠標動作效果。當鼠標懸停時,元素會變成灰色背景;當被點擊時,元素會變成深灰色背景;當鼠標移開時,元素的焦點框會消失。
此外,還展示了一個彈出菜單效果,當鼠標懸停在指定元素上時,會顯示出該元素下的菜單。
鼠標動作在CSS中很常見,也能用簡單的代碼實現出各種效果,提高了用戶對網頁的滿意度。