css 鼠标滑过图标变色 |css中按钮颜色

.icon {
color: #333; /* 图标原本的颜色 */
transition: color 0.3s; /* 添加过渡效果 */
}
.icon:hover {
color: #f00; /* 鼠标持续在图标上时的颜色 */
}

在上述代码中，定义了一个名为.icon的类，这个类应用于图标元素。初始状态下，图标的颜色是#333，当鼠标滑过图标时，会触发:hover伪类，此时图标的颜色会变成#f00。同时，由于为图标添加了过渡效果，颜色的变化过程会有一个平滑的过渡。

在实际应用中，可以根据自己的需求修改颜色和过渡效果的时间，以达到更好的视觉效果。