CSS3怎么实现鼠标悬停

在 CSS3 中，实现鼠标悬停效果主要使用 :hover 伪类。下面从基础到常见效果给你系统讲一下。

一、最基础：:hover 用法

示例：悬停改变颜色

<button class="btn">按钮</button>

.btn {
  background: #3498db;
  color: #fff;
  padding: 10px 20px;
  border: none;
}

.btn:hover {
  background: #2ecc71;
}

✅ 鼠标放上去时，背景颜色改变。

二、悬停改变文字 / 背景 / 边框

.box {
  width: 200px;
  height: 100px;
  border: 2px solid #333;
}

.box:hover {
  background: #f0f0f0;
  color: red;
  border-color: orange;
}

三、悬停动画（CSS3 重点）

1️⃣ 渐变过渡（transition）

.box {
  width: 200px;
  height: 200px;
  background: #3498db;
  transition: all 0.3s ease;
}

.box:hover {
  background: #e74c3c;
  transform: scale(1.1);
}

✅ 平滑放大 + 变色

2️⃣ 悬停旋转 / 缩放 / 位移

.box:hover {
  transform: rotate(5deg);
}

.box:hover {
  transform: translateY(-10px);
}

四、图片悬停效果（常见）

图片放大

.img-box img {
  width: 300px;
  transition: transform 0.4s;
}

.img-box img:hover {
  transform: scale(1.2);
}

图片遮罩（显示文字）

<div class="img-box">
  <img src="img.jpg">
  <div class="mask">文字</div>
</div>

.img-box {
  position: relative;
  width: 300px;
}

.mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  opacity: 0;
  transition: 0.3s;
}

.img-box:hover .mask {
  opacity: 1;
}

五、悬停显示子元素

.menu:hover .submenu {
  display: block;
}

.submenu {
  display: none;
}

六、伪元素 + 悬停

.btn::after {
  content: "➡";
  opacity: 0;
  transition: 0.3s;
}

.btn:hover::after {
  opacity: 1;
  margin-left: 5px;
}

七、悬停 + 动画（animation）

@keyframes shake {
  0% { transform: translateX(0); }
  50% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.box:hover {
  animation: shake 0.3s;
}

八、常见应用场景总结

九、注意事项

✅ :hover 只在 鼠标设备 生效
✅ 移动端通常靠点击触发
✅ 性能建议：

• 优先使用 transform / opacity
• 避免频繁改 width/height

如果你有具体效果（比如轮播、卡片、菜单、按钮）或 想做的 UI 样式，可以直接发给 URL 或截图，我可以帮你写完整 CSS。