css 鼠标经过

CSS中有一个常用的特效，就是鼠标经过的效果。

    .Box{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    .Box:hover{
        background-color: red;
    }

上面的代码表示，当鼠标经过class为Box的元素时，其背景颜色会变成红色。

除了改变背景颜色之外，鼠标经过还可以触发其他的效果，比如改变文字颜色、改变边框样式等。

    .Box{
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
    .Box:hover{
        border: 1px dashed red;
    }

上面的代码表示，当鼠标经过class为Box的元素时，其边框样式会从实线变为虚线，颜色也会由黑色变为红色。

鼠标经过效果不仅可以用于单个元素，也可以用于整个页面。

    body{
        background-color: white;
    }
    body:hover{
        background-color: black;
    }

上面的代码表示，当鼠标经过整个页面时，其背景颜色会从白色变为黑色。

鼠标经过效果是CSS中的一个重要特效，可以使页面更加生动、有趣。