通过input:hover::placeholder可实现悬停时占位符颜色变化，如默认#999变为#333并添加过渡效果，需注意加厂商前缀提升兼容性，适用于表单交互优化场景。
要实现CSS输入框占位符在悬停时颜色变化，可以通过组合使用 ::placeholder 伪元素和 :hover 伪类来完成。虽然不能直接将 :hover 应用于 ::placeholder，但可以对输入框本身应用 hover 状态，并在该状态下改变其占位符的样式。
使用 :hover 和 ::placeholder 联合控制
当用户将鼠标悬停在输入框上时，通过给 input 元素设置 :hover 状态，在该状态下修改其 ::placeholder 的颜色。
input::placeholder {
color: #999;
transition: color 0.3s ease;
}
input:hover::placeholder {
color: #333;
}
上面的代码表示：
- 默认状态下，占位符文字为浅灰色（#999）
- 当鼠标悬停在输入框上时，占位符颜色变为深灰色（#333）
- transition 让颜色变化更平滑
兼容性注意事项
不同浏览器对占位符样式的支持略有差异，建议添加厂商前缀以增强兼容性。
立即学习“前端免费学习笔记（深入）”；
input::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder { color: #999; }
input:-ms-input-placeholder { color: #999; }
input:hover::-webkit-input-placeholder { color: #333; }
input:hover::-moz-placeholder { color: #333; }
input:hover:-ms-input-placeholder { color: #333; }
现代浏览器已普遍支持标准语法 ::placeholder，但在需要支持较旧版本浏览器时，加上这些前缀更稳妥。
实际应用场景
这种效果适合用在表单交互优化中，例如：
- 提示用户当前输入框可交互
- 视觉反馈更丰富，提升用户体验
- 配合边框或背景色变化，形成统一的悬停动效
基本上就这些。不复杂但容易忽略细节。关键是理解：通过父状态（:hover）来触发子伪元素（::placeholder）的样式变化。
