HTML鼠標(biāo)經(jīng)過(guò)事件通常用于在鼠標(biāo)滑過(guò)某個(gè)HTML元素時(shí)改變?cè)撛氐耐庥^或觸發(fā)其他交互性的效果。下面是一個(gè)演示HTML鼠標(biāo)經(jīng)過(guò)事件的示例代碼：
```鼠標(biāo)經(jīng)過(guò)事件示例
這是一個(gè)鼠標(biāo)經(jīng)過(guò)事件的示例
``` 在上面的代碼中，我們定義了一個(gè)paragraph元素，并將其id設(shè)為“example”。在該元素上，我們添加了兩個(gè)事件監(jiān)聽(tīng)器：onmouseover和onmouseout。這些事件將分別在鼠標(biāo)滑過(guò)和滑出該元素時(shí)觸發(fā)。這兩個(gè)事件分別調(diào)用了JavaScript函數(shù)changeText()和restoreText()。 changeText()函數(shù)將修改paragraph元素的innerHTML屬性，以顯示一段文字（“鼠標(biāo)正在懸浮在該元素上”），并將元素的字體顏色設(shè)置為紅色，背景顏色設(shè)置為淺灰色。restoreText()函數(shù)將修改paragraph元素的innerHTML屬性，以顯示原來(lái)的文字（“這是一個(gè)鼠標(biāo)經(jīng)過(guò)事件的示例”），并將背景顏色和字體顏色設(shè)置為默認(rèn)值。 我們可以使用pre標(biāo)簽對(duì)這段代碼進(jìn)行格式化和展示，如下所示：<!DOCTYPE html>
<html>
<head>
<title>鼠標(biāo)經(jīng)過(guò)事件示例</title>
</head>
<body>
<p id="example" onmouseover="changeText()" onmouseout="restoreText()">這是一個(gè)鼠標(biāo)經(jīng)過(guò)事件的示例</p>
<script>
function changeText() {
document.getElementById("example").innerHTML = "鼠標(biāo)正在懸浮在該元素上";
document.getElementById("example").style.color = "red";
document.getElementById("example").style.backgroundColor = "lightgray";
}
function restoreText() {
document.getElementById("example").innerHTML = "這是一個(gè)鼠標(biāo)經(jīng)過(guò)事件的示例";
document.getElementById("example").style.color = "";
document.getElementById("example").style.backgroundColor = "";
}
</script>
</body>
</html>通過(guò)使用pre標(biāo)簽，我們可以使代碼更容易閱讀和理解。