迹忆客 专注技术分享

本篇文章将介绍一些使用内联 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>