使用內聯 CSS 懸停元素

Subodh Poudel 2023年2月20日 2021年12月20日
使用內聯 CSS 懸停元素

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

使用 onMouseOveronMouseOut JavaScript 事件使用內聯 CSS 建立懸停效果

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

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

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

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

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

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

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

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

例如,建立一個帶有文字 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>
Subodh Poudel avatar Subodh Poudel avatar

Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.

LinkedIn