如何通过内联 CSS 应用悬停

当用户悬停在一个 HTML 元素上时，我们可以通过 CSS 给元素添加一些效果。这种效果可以是颜色、背景、样式等等。在这篇文章中，我们将介绍如何通过内联 CSS 应用悬停效果。

首先，我们需要了解一下 CSS 的 :hover 伪类。它可以为一个元素在悬停时提供一个样式。下面是一个简单的示例：

<div style="background-color: red; width: 100px; height: 100px;"></div>

上面的代码将创建一个红色的正方形。现在，我们想在鼠标悬停在这个正方形时将其变成蓝色。这就需要使用 :hover 伪类了。下面是一个示例：

<div style="background-color: red; width: 100px; height: 100px;"
     onmouseover="this.style.backgroundColor='blue'" 
     onmouseout="this.style.backgroundColor='red'"></div>

上面的代码包含了两个事件处理程序，分别是 onmouseover 和 onmouseout。当鼠标悬停在元素上时，onmouseover 事件处理程序将会把背景色设置成蓝色。当鼠标移开时，onmouseout 事件处理程序将会把背景色设置回红色。

这种方法的缺点是代码冗长，而且会污染 HTML 内容。幸运的是，我们可以通过内联 CSS 的方式来更好地实现它。下面是一个示例：

<div style="background-color: red; width: 100px; height: 100px;"
     onmouseover="this.style.backgroundColor='blue'" 
     onmouseout="this.style.backgroundColor='red'"
     style="background-color: red; width: 100px; height: 100px;">
</div>

我们可以把 onmouseover 和 onmouseout 事件处理程序绑定到元素上时，同时使用内联 CSS 使元素在悬停时变成蓝色：

<div style="background-color: red; width: 100px; height: 100px; 
            transition: background-color 0.3s ease;"
     onmouseover="this.style.backgroundColor='blue';" 
     onmouseout="this.style.backgroundColor='red';">
</div>

这样代码就变得非常简洁明了。我们将 transition 属性添加到样式中，这样背景色会逐渐变化而不是突然变化。

总结一下，通过内联 CSS 应用悬停效果是一种简单而优雅的方法。使用 :hover 伪类和 transition 属性可以实现各种效果，同时保持代码简洁和易于维护。