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