使用内联 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