在網頁開發中，經常會遇到需要在鼠標劃過某個元素時改變其顏色的需求。通常情況下，我們可以使用CSS來實現這一效果。

以下是一些使用<div>元素和CSS來實現“劃過變色”效果的代碼案例。

案例一

在這個案例中，我們使用CSS的:hover偽類選擇器來實現<div>元素的“劃過變色”效果。

<style>
div:hover {
background-color: yellow;
color: red;
}
</style>
<br>
<div>劃過我，我會變色</div>

在這個案例中，當鼠標劃過<div>元素時，它的背景顏色會變成黃色，文本顏色會變成紅色。

案例二

在這個案例中，我們使用JavaScript來實現<div>元素的“劃過變色”效果。

<style>
.highlight {
background-color: yellow;
color: red;
}
</style>
<br>
<div onmouseover="this.classList.add('highlight')" onmouseout="this.classList.remove('highlight')">劃過我，我會變色</div>

在這個案例中，我們添加了一個名為“highlight”的CSS類。當鼠標劃過<div>元素時，我們使用JavaScript的onmouseover事件處理器和classList.add()方法來添加該類，從而改變<div>元素的樣式。當鼠標離開時，我們使用onmouseout事件處理器和classList.remove()方法來移除該類，恢復<div>元素的原始樣式。

案例三

在這個案例中，我們使用jQuery庫來實現<div>元素的“劃過變色”效果。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<br>
<script>
$(document).ready(function() {
$("div").hover(function() {
$(this).css("background-color", "yellow");
$(this).css("color", "red");
}, function() {
$(this).css("background-color", "");
$(this).css("color", "");
});
});
</script>
<br>
<style>
div {
cursor: pointer;
}
</style>
<br>
<div>劃過我，我會變色</div>

在這個案例中，我們引入了jQuery庫，并在頁面加載完成后使用$(document).ready()函數來執行代碼。當鼠標劃過<div>元素時，我們使用.hover()方法來指定鼠標進入和離開時的處理函數。在進入時，我們使用.css()方法來改變<div>元素的背景顏色和文本顏色。在離開時，我們將這些樣式屬性設置為空字符串，以恢復<div>元素的原始樣式。此外，我們還使用CSS樣式將鼠標指針樣式設置為“pointer”，以提醒用戶該元素可交互。

通過上述代碼案例，我們可以實現<div>元素的“劃過變色”效果。這種效果能夠增加用戶交互性，并使頁面更加生動。