在 CSS 中，我們可以通過使用過渡和動畫效果來使元素在鼠標拂過時發生變化。其中一種常見的方法是使用 CSS 過渡，通過設置元素的漸變色或背景色來實現鼠標拂過的效果。

下面，我們將介紹如何使用 CSS 過渡使元素變色。

1. 設置元素的漸變色或背景色

我們可以使用 CSS 過渡來設置元素的漸變色或背景色。例如，我們可以使用 CSS 漸變屬性來設置一個紅色的背景色，并在鼠標移動時隨著鼠標位置的變化而變化。

```css

background-color: #FF0000; /* 設置背景色為紅色 */

-webkit-background-color: #FF0000; /* 使用 Webkit 瀏覽器設置背景色為紅色 */

-moz-background-color: #FF0000; /* 使用 Mozilla 瀏覽器設置背景色為紅色 */

-o-background-color: #FF0000; /* 使用 Opera 瀏覽器設置背景色為紅色 */

background-color: #FF0000; /* 設置背景色為紅色 */

2. 設置元素的動畫效果

除了使用漸變色外，我們還可以使用 CSS 動畫效果來使元素變色。例如，我們可以使用 CSS 動畫效果來設置元素的字體顏色或背景顏色在鼠標移動時的漸變效果。

```css

-webkit-animation-name:Gradient; /* 設置動畫名為Gradient */

-moz-animation-name:Gradient; /* 設置動畫名為Gradient */

-o-animation-name:Gradient; /* 設置動畫名為Gradient */

animation-name:Gradient; /* 設置動畫名為Gradient */

@keyframes Gradient {

0% {

background-color: #FF0000;

100% {

background-color: #000000;

在上面的代碼中，我們定義了一個名為 Gradient 的動畫，它將元素的字體顏色設置為紅色。當我們鼠標移動到元素上時，動畫將逐漸淡入淡出。

通過使用 CSS 過渡和動畫效果，我們可以使元素在鼠標拂過時發生變化，而無需使用 JavaScript 或其他框架。