HTML 悬停时发光 - CSS

简介

在Web开发中，我们经常需要在页面中添加一些动态效果来吸引用户的注意力。其中一种常见的效果是鼠标悬停时元素发光。本文将介绍如何使用HTML和CSS实现这种效果。

实现方式

HTML

首先，我们需要在HTML中添加一个需要响应鼠标悬停事件的元素。此处我们假设我们需要实现一个鼠标悬停时按钮发光的效果，我们可以使用<button>元素。

<button class="glow-on-hover">悬停时发光的按钮</button>

CSS

然后，我们可以使用CSS为这个按钮添加特效。这里我们采用的是CSS3中的box-shadow属性，以及transition属性实现平滑过渡的效果。

.glow-on-hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    transition: all 0.3s;
}

.glow-on-hover:hover {
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
}

上述代码实现了一个在鼠标悬停时向四周扩大的发光效果。其中，box-shadow属性用于添加阴影效果，它的格式为x-offset y-offset blur spread color，分别表示阴影相对于元素的x轴方向的偏移，y轴方向的偏移，阴影的模糊程度，阴影的扩散程度以及阴影的颜色。transition属性用于指定CSS属性的过渡方式，这里我们使用all表示所有CSS属性过渡，时间设置为0.3秒。

效果演示

效果如下所示：

悬停时发光的按钮

结论

本文介绍了如何使用HTML和CSS实现HTML悬停时发光效果。这种效果能够吸引用户的注意力，增强用户体验，在Web开发中经常使用。