鼠標點擊狀態在網頁設計中非常常見，它可以提高用戶對網站的互動性。下面我們來學習一下如何使用CSS來改變鼠標點擊狀態。

1. hover狀態

當鼠標移動到鏈接、按鈕等元素上時，我們可以使用:hover選擇器來改變元素的樣式。

a:hover {
color: red;
text-decoration: underline;
}

這段代碼的意思是當鼠標移動到鏈接上時，鏈接的顏色會變成紅色，下劃線也會出現。

2. active狀態

當鼠標點擊鏈接或按鈕時，元素會進入到active狀態。我們可以使用:active選擇器來改變元素的樣式。

button:active {
background-color: #ee5555;
color: white;
}

這段代碼的意思是當按鈕被點擊時，按鈕的背景色會變成粉紅色，字體顏色變成白色。

3. focus狀態

當用戶使用tab鍵或鼠標聚焦到表單元素上時，元素會進入到focus狀態。我們可以使用:focus選擇器來改變元素的樣式。

input:focus {
border-color: #666666;
box-shadow: 0 0 10px #666666;
}

這段代碼的意思是當用戶聚焦在輸入框上時，輸入框的邊框顏色變成深灰色，同時加上了一個陰影效果。

通過上面的簡單介紹，我們可以看到CSS提供了很多方法來改變鼠標點擊狀態的樣式。運用這些樣式我們可以制作出更加酷炫的網頁交互效果。