CSS樣式鼠標觸發事件可以幫助我們實現一些鼠標懸停、點擊等交互效果,讓頁面更加生動有趣。
其中比較常用的三個屬性是::hover
、:active
和:focus
。
/* 鼠標懸停時改變背景色 */ a:hover { background-color: lightblue; } /* 按下鼠標時改變背景色 */ button:active { background-color: lightsalmon; } /* 獲取焦點時改變邊框顏色 */ input:focus { border-color: blue; }
我們可以將這些屬性應用于任何CSS選擇器中,例如鏈接、按鈕、輸入框等元素。
值得一提的是,:hover
屬性可以用來在鼠標懸停時顯示隱藏元素,可以實現一些簡單的下拉菜單效果。
/* 鼠標懸停時顯示下拉菜單 */ .dropdown:hover .dropdown-content { display: block; }
最后,需要注意的是,鼠標觸發事件只在PC端有效,移動端默認沒有鼠標,需要使用觸摸事件來實現類似效果。
下一篇css樣式重繪觸發