<div 高亮效果是前端開發中常用的一種效果，它可以使特定的元素在頁面上脫穎而出，吸引用戶的注意力。通過添加一些CSS樣式和JavaScript代碼，我們可以輕松實現這個效果。接下來，我將通過幾個代碼案例來詳細解釋和演示div高亮效果的實現方法。
第一個案例是通過鼠標懸停來觸發div的高亮效果。當用戶將鼠標懸停在一個元素上時，我們可以改變它的背景顏色、邊框顏色或其他樣式屬性，從而營造出一個突出的效果。下面是示例代碼：

<style>
.highlight {
background-color: yellow;
border: 2px solid red;
}
</style>
<div onmouseover="this.className='highlight'" onmouseout="this.className=''">
這是一個被高亮的div。
</div>

在上述代碼中，我們定義了一個CSS樣式.highlight，包括黃色的背景和紅色的邊框。當鼠標懸停在div上時，使用onmouseover事件將div的className設置為highlight，從而應用這個樣式；當鼠標離開div時，使用onmouseout事件將className設置為空，恢復原始樣式。
第二個案例是通過點擊按鈕來觸發div的高亮效果。當用戶點擊一個按鈕時，我們可以動態改變div的樣式，使其突出顯示。下面是示例代碼：

<style>
.highlight {
background-color: yellow;
border: 2px solid red;
}
</style>
<button onclick="highlightDiv()">點擊我高亮div</button>
<div id="myDiv">
這是一個普通的div。
</div>
<br>
<script>
function highlightDiv() {
var div = document.getElementById("myDiv");
div.className = "highlight";
}
</script>

在上述代碼中，我們定義了一個按鈕，并給它添加了一個onclick事件。當用戶點擊按鈕時，通過JavaScript代碼獲取id為myDiv的div元素，并將其className設置為highlight，從而應用高亮樣式。
第三個案例是通過滾動頁面到指定位置來觸發div的高亮效果。當用戶滾動頁面時，我們可以檢測滾動位置，如果滿足一定條件，就給特定的div添加高亮樣式。下面是示例代碼：

<style>
.highlight {
background-color: yellow;
border: 2px solid red;
}
</style>
<div id="scrollDiv">
這是一個普通的div。
</div>
<br>
<script>
window.onscroll = function() {
var div = document.getElementById("scrollDiv");
var scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
if (scrollPosition > 200) {
div.className = "highlight";
} else {
div.className = "";
}
};
</script>

在上述代碼中，我們定義了一個id為scrollDiv的div元素。通過JavaScript代碼，使用window.onscroll事件監聽滾動事件。在事件處理函數中，獲取滾動位置，并判斷是否滿足高亮條件，如果是，則給div添加highlight樣式，否則移除樣式。
通過上述幾個案例，我們可以看到，在前端開發中，實現div高亮效果是非常簡單的。無論是通過鼠標懸停、點擊按鈕還是滾動頁面，我們都可以通過添加一些CSS樣式和JavaScript代碼來實現這個效果。這些方法可以根據實際需求進行靈活組合和調整，以達到最佳的高亮效果。希望本文能幫助到你理解和應用div高亮效果。