css 鼠标移动上去变蒙

CSS中的:hover伪类能够实现鼠标移动到元素上时改变元素样式的效果。

/*通用选择器*/
*{
    margin:0;
    padding:0;
}

/*定义要改变的样式*/
.Box{
    width: 200px;
    height: 200px;
    background: #f2f2f2;
    border-radius: 5px;
    transition: all 0.3s ease;
}

/*鼠标移上去时的样式*/
.Box:hover{
    Box-shadow: 0 0 15px #666;
    background: #fff;
    transform: scale(1.1);
}

在这段代码中，我们首先定义了一个class为Box的元素，在正常情况下的样式为指定的宽度、高度、背景色和边框圆角。在鼠标移上去时，我们通过:hover伪类来指定样式，使元素的背景色变为白色，同时添加一个模糊的边框和缩放效果，使元素看起来更加立体。