在網頁設計中，CSS是不可或缺的一部分。通過CSS，我們可以對網頁的樣式做出諸多調整，改變字體、顏色、布局等等。而其中最常見的操作之一，就是通過點擊鼠標來改變某個元素的樣式。

.button {
padding: 10px;
background-color: #333;
color: #fff;
}
.button:hover {
background-color: #fff;
color: #333;
}

上述代碼展示了一個簡單的樣式改變效果。首先，我們定義了一個按鈕的類名.button，并賦予它基本樣式。其中padding屬性用于定義按鈕內邊距，background-color屬性用于定義按鈕背景色，color屬性用于定義按鈕文字顏色。

接著，在類名后面加上:hover偽類選擇器。這意味著在鼠標懸停在該元素上時，會應用:hover后的樣式。代碼中，我們將鼠標懸停時的背景色變為白色，文字顏色變為黑色。

除了:hover偽類，還有其他一些偽類可以達到類似的效果。例如，我們可以使用:focus來定義輸入框獲得焦點時的樣式，或者使用:checked來定義復選框或單選框被選中時的樣式。

總之，通過使用CSS的偽類選擇器，我們可以輕松實現基于用戶交互的樣式改變效果，從而讓網頁更加美觀生動。