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