css实现移动到文字变色

随着移动设备的普及和网站响应式设计的趋势，如何让文字能够在鼠标经过时变色成为了一个常见的需求。CSS的:hover伪类可以很好地解决这个问题。

首先，在CSS中定义文字的基本样式：

    p {
        font-size: 16px;
        color: black;
    }

接下来，我们使用:hover伪类定义鼠标经过时文字的样式：

    p:hover {
        color: red;
    }

当鼠标经过p标签时，文字的颜色就会变成红色。当然，这只是最基本的应用，我们可以通过调整各种CSS属性来实现更多的效果。

例如，我们可以添加transition属性来让变色更加平滑：

    p {
        font-size: 16px;
        color: black;
        transition: color 0.2s ease-in-out;
    }
    
    p:hover {
        color: red;
    }

现在，当我们鼠标经过p标签时，文字的颜色会在0.2秒内由黑色平滑地变成红色。

当然，不仅仅是文字颜色，在:hover伪类中我们还可以调整背景颜色、边框、阴影等CSS属性。这些属性的变化可以让用户在鼠标经过时感受到视觉上的变化，提升网站的用户体验。

CSS的:hover伪类可以轻松地实现文字变色效果，并且可以通过调整其他CSS属性来达到更多的效果。它是web前端开发中常用的基础CSS技巧之一。