::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 都会变色，逻辑清晰且兼容性强。
