• 使用 :hover 定义悬停状态
• 设置希望改变的属性，比如 background-color 或 transform

• property：指定要过渡的 CSS 属性，如 background-color 或 all
• duration：过渡持续时间，例如 0.3s
• timing-function：控制动画速度曲线，如 ease-in-out
• delay：延迟开始时间（可选）

li {
  padding: 10px;
  background-color: #f0f0f0;
  color: #333;
  list-style: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

li:hover {
  background-color: #007bff;
  color: white;
}

li {
  transition: transform 0.2s ease;
}

li:hover {
  transform: scale(1.05) translateY(-2px);
}

• 给所有可能变化的属性都加上 transition，避免跳变
• 使用 will-change: transform 提升动画性能
• 确保 hover 区域足够大，便于点击（尤其移动端需谨慎）
• 保持过渡时间在 0.1s–0.3s 之间，太长会显得迟钝