::placeholder 伪元素不支持 :hover，因其非独立可交互元素；正确写法是 input:hover::placeholder，需兼顾 focus 并注意浏览器兼容性与优先级。
在 CSS 中，::placeholder 伪元素本身**不支持 :hover 伪类**，因为 placeholder 文本不是独立可交互的元素，它只是 input 的一部分视觉提示，浏览器不允许对它单独绑定悬停状态。所以写成 input:hover::placeholder 或 input::placeholder:hover 都是无效的。
为什么 hover + ::placeholder 不生效
根本原因在于：
- ::placeholder 是一个**伪元素（pseudo-element）**，不是伪类（pseudo-class）；
- 它依附于 元素存在，但**没有自己的事件或状态**；
- 浏览器规范（CSS Pseudo-Elements Level 4）明确未定义 ::placeholder:hover 这类组合；
- 所有主流浏览器（Chrome、Firefox、Safari）均不支持该写法。
正确实现“悬停时改变 placeholder 样式”的方法
虽然不能直接 hover placeholder，但可以通过**hover input 本身，再控制其内部 placeholder 的样式**来间接实现效果：
- 使用
input:hover::placeholder—— ✅ 实际有效（注意：是 hover input，不是 placeholder） - 确保选择器权重足够，避免被其他样式覆盖
- 为不同浏览器添加兼容前缀（尤其 Safari 和旧版 Edge）
示例代码：
input::placeholder {
color: #999;
transition: color 0.2s;
}
input:hover::placeholder {
color: #333;
}
/ 兼容写法（可选） /
input::-webkit-input-placeholder { color: #999; }
input:hover::-webkit-input-placeholder { color: #333; }
input::-moz-placeholder { color: #999; }
input:hover::-moz-placeholder { color: #333; }
input:-ms-input-placeholder { color: #999; }
input:hover:-ms-input-placeholder { color: #333; }
常见失效原因与排查建议
即使写了 input:hover::placeholder，仍可能没效果，检查以下几点：
立即学习“前端免费学习笔记（深入）”；
- input 没有内容且未获得焦点：placeholder 只在值为空时显示，若 input 已有默认 value 或被 JS 赋值，placeholder 就不会出现
-
CSS 优先级冲突：比如全局重置样式（如 normalize.css）或框架样式设置了更高权重的
::placeholder，用!important临时验证（不推荐长期使用） -
父容器阻止了 hover 事件：例如父元素设置了
pointer-events: none，或遮罩层覆盖 input -
移动端无 hover 概念：iOS/Android 上 hover 多数不触发（仅部分桌面模式 WebView 可能响应），需搭配
:focus做降级
更稳妥的替代方案：结合 focus 和 hover
兼顾鼠标悬停和键盘聚焦体验，提升可访问性：
input::placeholder {
color: #bbb;
transition: color 0.2s ease;
}
input:hover::placeholder,
input:focus::placeholder {
color: #555;
}
这样用户无论是鼠标移入、还是 Tab 切换聚焦到输入框，placeholder 都会变色，逻辑清晰且兼容性强。
