在 CSS 中，我们可以使用 :hover 伪类来指定鼠标指针悬停在元素上时的样式，比如颜色、字体、大小、边框、背景等。合理地使用 :hover 伪类，可以大大提高用户的交互体验。
语法：
selector:hover {
/* 样式规则 */
}说明：
:hover 伪类可以应用于绝大多数 HTML 元素，比如 div、a、p 等。但对不可见元素如 form、meta、script 等无效。
:hover 伪类经常与 transition 属性结合，来实现样式的平滑变化。
提示: 在手机等触屏设备上，:hover 的效果通常需要点击才能触发，体验非常查。因此在移动端开发中，我们应该尽量少使用 hover 进行交互。
示例 1：CSS :hover 用于 div 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
color: white;
background-color: lightskyblue;
}
div:hover {
background-color: hotpink;
}
</style>
</head>
<body>
<div>绿叶网</div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 上时，此时效果如下图 2 所示。
分析：
在这个例子中，我们使用 :hover 伪类来定义鼠标悬停效果。当鼠标移到 div 元素上时，其背景颜色会改变。
此外，为了更好的用户体验，我们还可以使用 cursor 属性来定义鼠标的外观。
示例 2：CSS :hover 用于 img 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img { border: 2px solid transparent; }
img:hover {
border-color: red;
}
</style>
</head>
<body>
<img src="./imgs/bird.jpg" alt="">
</html>默认情况下，页面效果如下图 1 所示。当鼠标经过时，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用 :hover 伪类使得当鼠标移到图片上时，图片就添加一条边框（其实是将边框颜色由 “transparent” 改为 “red”）。在实际开发中， hover 伪类应用非常广泛，任何一个网站都会大量地用到，我们要好好掌握。
示例 3：CSS :hover 用于 a 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a {
color: blue;
text-decoration: none; /* 移除默认下划线 */
}
a:hover {
color: red;
text-decoration: underline; /* 添加下划线 */
}
</style>
</head>
<body>
<a href="https://www.lvyenet.com">绿叶网</a>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标经过时，页面效果如下图 2 所示。
分析：
默认情况下，链接颜色为蓝色，并且没有下划线。当鼠标移到链接上时，颜色会变为红色，出现下划线。
