在CSS中，鼠标悬浮（hover）是一种常见的交互效果。当用户将鼠标指针悬停在某个元素上时，CSS :hover 伪类可以用来定义该元素的样式变化。常用于按钮、链接、图片、列表项等元素的交互效果。
1. 基础语法
element:hover { /* 定义悬浮时的样式 */ }
element是你要应用鼠标悬浮效果的元素，如a、div、button、img等。:hover伪类表示鼠标悬浮在该元素上时应用的样式。
2. 常见的鼠标悬浮样式
2.1. 改变背景颜色
例如：悬浮时改变按钮的背景色。
button:hover {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 文字颜色变为白色 */
}
2.2. 改变文本颜色
例如：悬浮时改变链接的文本颜色。
a:hover {
color: red; /* 将文本颜色改为红色 */
}
2.3. 添加下划线
例如：悬浮时给链接添加下划线效果。
a:hover {
text-decoration: underline; /* 添加下划线 */
}
2.4. 缩放效果
例如：鼠标悬浮时让图片放大。
img:hover {
transform: scale(1.1); /* 放大10% */
transition: transform 0.3s ease; /* 添加过渡效果 */
}
2.5. 旋转效果
例如：鼠标悬浮时让元素旋转。
div:hover {
transform: rotate(15deg); /* 旋转15度 */
transition: transform 0.3s ease; /* 添加过渡效果 */
}
2.6. 阴影效果
例如：鼠标悬浮时添加阴影效果。
div:hover {
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}
2.7. 透明度变化
例如：鼠标悬浮时改变元素的透明度。
div:hover {
opacity: 0.7; /* 改变透明度为0.7 */
}
3. 组合效果
你可以组合多个效果来创造更复杂的交互体验。比如，鼠标悬浮时同时改变背景色、文字颜色和添加阴影。
button:hover {
background-color: #ff6347; /* 背景颜色变为番茄色 */
color: white; /* 文字变白色 */
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
transform: scale(1.05); /* 放大元素 */
transition: all 0.3s ease; /* 添加过渡效果 */
}
4. 使用 transition 平滑过渡
在悬浮效果中使用 transition 可以让元素的样式变化更加平滑。
div {
transition: background-color 0.3s ease, transform 0.3s ease; /* 对背景颜色和变换添加过渡效果 */
} div:hover {
background-color: #f0f0f0; /* 改变背景颜色 */
transform: scale(1.1); /* 放大元素 */
}
5. 伪类组合
你还可以组合多个伪类来实现更复杂的交互效果。例如， :hover 和 :focus 结合使用，适用于按钮或输入框。
button:hover, button:focus {
background-color: #ff6347;
color: white;
outline: none; /* 去掉焦点轮廓 */
}
示例：创建一个悬浮按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Button</title>
<style>
/* 基础样式 */
button {
padding: 10px 20px;
border: 2px solid #4CAF50;
background-color: white;
color: #4CAF50;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease; /* 添加平滑过渡 */
}
/* 鼠标悬浮时的效果 */
button:hover {
background-color: #4CAF50; /* 背景色变为绿色 */
color: white; /* 文字颜色变为白色 */
transform: scale(1.1); /* 按钮稍微放大 */
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}
</style>
</head>
<body>
<button>Hover me!</button>
</body>
</html>
总结
:hover伪类 用于定义鼠标悬浮时的样式，可以用于大多数HTML元素。- 常见的样式包括 背景色改变、文本颜色变化、缩放、旋转、阴影效果、透明度变化 等。
- 使用
transition可以使样式变化更加平滑。 - 通过组合多种效果，可以创建复杂的交互体验。
