CSS鼠标经过样式是指在鼠标悬浮在一个元素上时，对这个元素的样式进行改变，这种交互方式能够提高用户体验，使界面更加生动、有趣。
一、CSS鼠标经过样式代码
要实现鼠标经过样式效果，必须使用以下两种基本的CSS选择器：
/*通过id选择器选中元素*/
#element-id {
/*普通样式*/
properties: value;
/*鼠标经过时的样式*/
properties: value;
}
/*通过类选择器选中元素*/
.element-class {
/*普通样式*/
properties: value;
/*鼠标经过时的样式*/
properties: value;
}
其中，#element-id表示通过id选择器选中一个元素，.element-class表示通过类选择器选中一个元素
二、CSS鼠标经过变大
在鼠标经过一个元素时，我们可以通过缩放属性transform: scale()实现变大的效果：
.element:hover {
transform: scale(1.2);
/*为了使变大时的效果更加平滑，可以添加过度效果*/
transition: all 0.3s linear;
}
这里我们设置了鼠标经过时元素变大1.2倍的效果，并添加了0.3秒的过渡效果，使变化更加自然平滑。
三、CSS鼠标经过样式属性
CSS鼠标经过样式可以应用到各种CSS属性上，例如颜色、背景、边框等。
以下是一个实现鼠标经过背景颜色变化的示例：
.element:hover {
background-color: #f00;
}
当鼠标悬浮在该元素上时，元素背景颜色变成红色。
四、CSS鼠标经过显示图片
有时候我们希望在鼠标经过时，显示一张图片。
/*HTML*/
<div class="element">
<img src="image1.jpg">
</div>
/*CSS*/
.element img {
/*图片默认不显示*/
display: none;
}
.element:hover img {
/*鼠标经过时显示*/
display: block;
}
以上代码实现了当鼠标经过
元素时，显示一张图片。
五、CSS鼠标经过变色
通过调整元素的颜色属性也可以实现鼠标经过变色的效果。
.element:hover {
color: #f00;
}
以上代码将鼠标经过时元素的字体颜色变成了红色。
六、CSS鼠标经过伪类显现
通过CSS伪类可以达到更加灵活的鼠标经过样式效果。
.element:before {
content: "默认状态";
}
.element:hover:before {
content: "鼠标经过状态";
color: #f00;
}
以上代码使用伪类:before，当鼠标经过
元素时，元素前面的文本从“默认状态”变成了“鼠标经过状态”，并且字体颜色变成了红色。
七、CSS鼠标经过a标签字体变大
在网页中，经常会使用超链接标签，当鼠标经过时，我们可以将字体变大，提高链接的可点击性。
a:hover {
font-size: 1.2em;
}
以上代码使得鼠标经过一个超链接时，字体大小变大1.2倍，链接更加突出。
八、鼠标经过的CSS代码
当我们需要使用鼠标交互样式时，可以将CSS放在单独的样式表中，也可以直接写在HTML页面的
