html鼠标悬浮效果

HTML中可以使用CSS实现鼠标悬浮效果，常用的两种方式是hover伪类和transition属性。

1. hover伪类

可以通过使用:hover伪类来实现鼠标悬浮效果，例如：

<style>
    .box {
        background-color: #ccc;
        width: 200px;
        height: 200px;
    }
    .box:hover {
        background-color: #f00;
    }
</style>

<div class="box"></div>

上述代码中，当鼠标悬浮在.box元素上时，背景颜色会从灰色变成红色。

2. transition属性

在hover伪类的基础上，可以使用transition属性来实现平滑的过渡效果，例如：

<style>
    .box {
        background-color: #ccc;
        width: 200px;
        height: 200px;
        transition: background-color 0.5s ease;
    }
    .box:hover {
        background-color: #f00;
    }
</style>

<div class="box"></div>

上述代码中，当鼠标悬浮在.box元素上时，背景颜色会平滑地从灰色过渡到红色，过渡时间为0.5秒。