一、CSS鼠标悬停效果
鼠标悬停效果，是我们经常用到的一种互动效果。通过添加:hover伪类选择器，展示出悬停状态下的样式，可以使网站更具有交互性。例如，我们可以为按钮添加悬停效果，提高按钮的易用性。
.btn:hover {
background-color: #007bff;
color: #fff;
}
在例子中，.btn类指按钮的基础样式，在:hover伪类选择器下，改变了背景颜色和字体颜色，展现出按钮悬停状态下的样式。
二、CSS鼠标悬停照片在框内变大
当鼠标悬停于图片上时，我们常常需要让图片在框内变大或显示出阴影等效果。这种效果可以通过CSS的transform属性来实现。
.img-container:hover img {
transform: scale(1.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
在例子中，.img-container类控制图片容器的大小和布局，在:hover伪类选择器下，使用transform:scale(1.2)将图片缩放至原来的1.2倍，同时显示出阴影效果。
三、CSS鼠标变成小手
当鼠标悬停于链接或可点击元素上时，我们经常需要将其鼠标样式更改为小手。这种效果可以通过CSS的cursor属性来实现。
a:hover {
cursor: pointer;
}
在例子中，a:hover伪类选择器控制鼠标悬停链接时的样式，cursor: pointer表明鼠标样式将变为小手指状。
四、CSS鼠标经过
鼠标经过是指鼠标移入和移出某个区域所产生的效果，可以将其视为一种过渡效果。这种效果可以通过CSS的transition属性来实现。
.btn {
transition: background-color 0.5s ease;
}
.btn:hover {
background-color: #007bff;
color: #fff;
}
在例子中，.btn类指按钮的基础样式，设定了background-color属性的过渡效果，.btn:hover伪类选择器控制鼠标悬停时的样式，background-color的改变将受到过渡效果的控制。
五、CSS鼠标样式
CSS提供了多种默认的鼠标样式，例如箭头、文本等。我们还可以自定义鼠标样式，例如将其改成一张图片。
.btn {
cursor: url(cursor.png), auto;
}
在例子中，.btn类指按钮的基础样式，使用cursor属性自定义鼠标样式，url(cursor.png)表明鼠标将变成一张名为cursor.png的图片。
六、CSS鼠标选中样式
当鼠标选中某个文本时，我们经常需要为其添加样式来强调选中的内容。这种效果可以通过CSS的::selection伪元素来实现。
::selection {
background-color: #007bff;
color: #fff;
}
在例子中，使用::selection伪元素为选中文本添加了背景色和字体颜色。
七、CSS鼠标点击后效果
当鼠标点击某个元素时，我们经常需要为其添加反馈效果，例如改变按钮的位置或缩小图片。这种效果可以通过CSS的:active伪类选择器来实现。
.btn:active {
transform: translateY(2px);
}
在例子中，.btn类指按钮的基础样式，在:active伪类选择器下，使用transform:translateY(2px)将按钮向下移动2px。
八、CSS鼠标点击属性
当鼠标点击某个链接时，我们经常需要为其添加样式以强调点击效果。这种效果可以通过CSS的:visited伪类选择器来实现。
a:visited {
color: #9b4dca;
}
在例子中，a:visited伪类选择器将访问过链接的字体颜色改为紫色。
九、CSS鼠标经过变色
当鼠标悬停于某个元素时，我们经常需要改变元素的颜色以强调效果。这种效果可以通过CSS的:hover伪类选择器来实现。
.btn:hover {
background-color: #007bff;
color: #fff;
}
在例子中，.btn类指按钮的基础样式，在:hover伪类选择器下，改变了背景颜色和字体颜色，展现出按钮悬停状态下的样式。
十、CSS鼠标事件
CSS提供了多种鼠标事件，包括click、mouseover、mouseout等。我们可以为这些事件定义样式和行为。
.btn {
background-color: #007bff;
color: #fff;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #0069d9;
}
.btn:active {
transform: translateY(2px);
}
在例子中，为按钮添加了基础样式和交互效果，包括悬停、点击等多种事件，提升了按钮的易用性和用户体验。
