使用內聯 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>
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