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