本文目錄導讀：

1. 使用CSS變量
2. 使用CSS過渡
3. 使用JavaScript

CSS鼠標懸停顏色保持技巧

在CSS中，我們可以使用:hover偽類來定義鼠標懸停時的樣式，但是有時候我們需要保持鼠標懸停時的顏色，即使鼠標離開了該元素，我們該如何實現(xiàn)呢？

使用CSS變量

我們可以使用CSS變量來存儲鼠標懸停時的顏色，并在需要時引用該變量。

:root {
  --hover-color: #ff0000; /* 紅色 */
}
.my-element:hover {
  background-color: var(--hover-color);
}

在上面的代碼中，我們定義了一個CSS變量--hover-color，并將其值設置為紅色，在.my-element:hover樣式中，我們將背景顏色設置為該變量的值，即紅色，這樣，即使鼠標離開了該元素，背景顏色也會保持為紅色。

使用CSS過渡

我們還可以使用CSS過渡來保持鼠標懸停時的顏色。

.my-element {
  background-color: #000000; /* 黑色 */
  transition: background-color 0.5s; /* 過渡時間 */
}
.my-element:hover {
  background-color: #ff0000; /* 紅色 */
}

在上面的代碼中，我們將.my-element的背景顏色設置為黑色，并使用transition屬性定義了一個過渡效果，當鼠標懸停在.my-element上時，背景顏色會變?yōu)榧t色，并保持該顏色0.5秒，這樣，即使鼠標離開了該元素，背景顏色也會保持為紅色一段時間。

使用JavaScript

除了CSS方法外，我們還可以使用JavaScript來保持鼠標懸停時的顏色。

var myElement = document.querySelector('.my-element');
var hoverColor = '#ff0000'; /* 紅色 */
var originalColor = myElement.style.backgroundColor; /* 原始背景顏色 */
myElement.addEventListener('mouseenter', function() {
  myElement.style.backgroundColor = hoverColor; /* 設置懸停背景顏色 */
});
myElement.addEventListener('mouseleave', function() {
  myElement.style.backgroundColor = originalColor; /* 恢復原始背景顏色 */
});

在上面的代碼中，我們獲取了.my-element元素的引用，并定義了懸停和離開時的背景顏色處理函數(shù)，當鼠標進入.my-element時，背景顏色會變?yōu)榧t色；當鼠標離開時，背景顏色會恢復為原始顏色，這樣，我們就可以保持鼠標懸停時的顏色了。