CSS中有很多不同的鼠標響應事件,可以讓我們在用戶和頁面之間建立交互性。其中最常見的包括:hover、:active和:focus。
:hover是當用戶將鼠標懸停在元素上時觸發的響應事件。通常情況下,我們會將此事件與CSS的transition一起使用,以創建平滑的效果。
.box{ background-color: #ccc; transition: background-color 0.3s ease-out; } .box:hover{ background-color: red; }
:active是當用戶在元素上點擊鼠標并保持鼠標按下的狀態時觸發。這在制作按鈕時非常有用,可以使按鈕在被點擊時立即顯示反饋。
.btn{ background-color: #ccc; } .btn:active{ background-color: red; }
:focus是當元素獲取焦點時觸發。通常用于表單控件和鏈接,可以使頁面在用戶和元素交互時更加友好。
input[type="text"], textarea{ border: 1px solid #ccc; } input[type="text"]:focus, textarea:focus{ border-color: red; }
以上這些鼠標響應事件都可以讓我們在頁面上添加一些交互性和動效。如果你還沒有嘗試過,趕快動手試試吧。
上一篇css網頁布局看什么書
下一篇css網頁背景圖插入