CSS 實時監控 div 狀態

div:hover {
background-color: yellow;
}

CSS 中的 :hover 偽類是一個很常用的屬性選擇器，它允許在鼠標指針滑過元素時改變元素的狀態。在上面的代碼片段中，當鼠標指針滑過包含 div 元素時，元素的背景色將會變成黃色。

但是 :hover 只在鼠標指針滑過元素時才會生效，為了實時監控 div 的狀態，我們需要結合 JavaScript 來實現。具體做法就是通過 JavaScript 獲取元素的狀態，然后動態地改變元素的樣式。

var divElement = document.querySelector('div');
function checkElementState() {
if (divElement.classList.contains('active')) {
divElement.style.background-color = 'red';
} else {
divElement.style.background-color = 'blue';
}
}
setInterval(checkElementState, 500);

上面的代碼片段展示了一個用 JavaScript 實時監控 div 狀態的例子。首先，我們獲取了 div 元素的引用，并定義了一個 checkElementState 函數來檢查元素狀態和改變元素樣式。然后，我們通過 setInterval 函數來定時執行 checkElementState 函數，從而實現實時監控 div 狀態的效果。

通過上面的例子，我們可以發現，組合使用 CSS 和 JavaScript 可以實現更加豐富和動態的效果。CSS 提供了靜態的樣式，而 JavaScript 則提供了動態的交互和更新，兩者結合起來可以發揮出更多的優勢。