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伪类来指定样式,使元素的背景色变为白色,同时添加一个模糊的边框和缩放效果,使元素看起来更加立体。