CSS鼠標碰到效果，是指在鼠標移動到一定元素上時，會產生特定的效果，從而增強網頁的交互性和美觀性。以下是一些常見的鼠標碰到效果。 :hover :hover是CSS中用于設置鼠標移動到元素上時的效果的偽類選擇器。例如，以下代碼會讓圖像在鼠標移動到其上方時出現灰色的半透明層： ``` img:hover { opacity: 0.5; background-color: grey; } ``` :active :active是CSS中用于設置鼠標按下元素時的效果的偽類選擇器。例如，以下代碼會讓按鈕在鼠標按下時變成深灰色： ``` button:active { background-color: darkgrey; color: white; } ``` :focus :focus是CSS中用于設置元素獲取焦點時的效果的偽類選擇器。例如，以下代碼會讓文本輸入框在獲得焦點時出現藍色的邊框： ``` input:focus { border: 2px solid blue; } ``` :hover:before :hover:before是CSS中用于在元素上加上偽元素的選擇器。例如，以下代碼會讓鼠標移動到圖像上時出現一個圖標： ``` img:hover:before { content: "→"; font-size: 24px; color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 以上就是一些常見的CSS鼠標碰到效果，可以用它們來制作出更加美觀和交互性強的網頁。