在CSS中,我們可以通過定義某個元素的一些特定狀態來控制元素的顯示效果,以此來實現交互效果,這就是Action。Action可以分為三類:hover、active和focus。
其中,hover是指當鼠標懸停在某個元素上時的狀態,可以通過:hover偽類來實現。例如:
button:hover { background-color: #4CAF50; }
這段代碼表示當鼠標懸停在button按鈕上時,該按鈕會出現背景色為#4CAF50的效果。
active是指當鼠標點擊元素并按下不放時的狀態,可以通過:active偽類來實現。例如:
button:active { background-color: #4CAF50; box-shadow: 0 5px #666; transform: translateY(4px); }
這段代碼表示當點擊button按鈕時,該按鈕會出現背景色為#4CAF50、陰影效果以及向下移動4px的效果。
focus是指當某個元素被選中時的狀態,可以通過:focus偽類來實現。例如:
input:focus { border: 3px solid #4CAF50; }
這段代碼表示當輸入框被選中時,該輸入框會出現粗細為3px且邊框顏色為#4CAF50的效果。
總之,使用Action可以為用戶提供更加友好的交互體驗,增強網頁的可用性和美觀性。