使用內聯 CSS 懸停元素

本教程將介紹一些使用內聯 CSS 懸停元素的方法。

使用 onMouseOver 和 onMouseOut JavaScript 事件使用內聯 CSS 建立懸停效果

在使用外部 CSS 時，很容易將懸停效果應用於元素。例如，我們可以實現如下所示：

a{
 color:red;
}
a:hover{
 color:blue;
}

當我們將滑鼠移動到 a 元素時，紅色變為藍色。

在這裡，我們使用 :hover 選擇器來選擇我們選擇的元素。但是，我們不能在內聯 CSS 中編寫 :hover 選擇器。

因為內聯 CSS 只支援樣式，所以不允許我們寫選擇器。但是，我們仍然可以使用內聯 CSS 模擬懸停效果。

為此，我們需要使用 onMouseOver 和 onMouseOut JavaScript 事件。onMouseOver 事件將在我們將滑鼠指標移動到元素上時執行。

類似地，當我們將滑鼠指標從元素上移開時，將執行 onMouseOut 事件。我們可以將這些事件作為錨點標籤的一個屬性，並設定文字的顏色。

例如，當滑鼠移動到文字上時，我們可以使用 onMouseOver 事件設定一種顏色，並使用 onMouseOut 事件設定另一種顏色。我們可以使用 this 關鍵字來呼叫 style 和 color 屬性，然後分配顏色。

例如，建立一個帶有文字 Click Here 的錨標記，並使用 onMouseOver 事件作為錨標記的屬性。將其值設定為 this.style.color 併為 onMouseOut 事件提供顏色程式碼 #f00 和顏色程式碼 #000。

當我們將滑鼠移到文字 Click Here 上時，顏色變為紅色。而且，當我們從文字中移除滑鼠時，顏色會變為黑色。

通過這種方式，我們可以使用 JavaScript 事件來模擬使用內聯 CSS 的懸停效果。

示例程式碼：

<a href="#"
 onMouseOver="this.style.color='#f00'"
 onMouseOut="this.style.color='#000'" >
 Click Here
</a>