::placeholder伪元素不支持:hover，应使用input:focus::placeholder配合transition实现placeholder淡入淡出；需将transition声明在input上以确保兼容性，Safari等旧浏览器需添加私有前缀。
在 CSS 中，::placeholder 伪元素本身**不支持 :hover 伪类**，这是浏览器规范限制导致的——placeholder 文本只存在于输入框为空且未聚焦时，它没有独立的 hover 状态。所以直接写 input:hover::placeholder { opacity: 0; transition: opacity .3s; } 是无效的。
用:focus-within或:focus控制placeholder显隐
真正可行的方式是借助父容器或 input 自身的聚焦状态来触发动画。常见且兼容性好的做法是：
- 给 input 或其外层容器添加
:focus-within（推荐用于有包裹结构的场景） - 或直接用
input:focus::placeholder（更直接，但仅在聚焦时生效）
注意：placeholder 的 opacity 动画需配合 transition 写在 input 元素上，而不是 ::placeholder 上（部分浏览器不支持在伪元素上声明 transition）。
正确写法示例（淡入淡出）
以下代码实现「获得焦点时 placeholder 淡出，失焦且输入为空时淡入」：
立即学习“前端免费学习笔记（深入）”；
input {
transition: opacity 0.3s ease;
}
input::placeholder {
opacity: 1;
transition: opacity 0.3s ease; /* 部分新版本浏览器支持，但保险起见仍建议写在 input 上 */
}
input:focus::placeholder {
opacity: 0;
}✅ 这样写能稳定触发淡出；若想失焦后自动淡入，无需额外 JS —— 浏览器默认会在失去焦点且值为空时重新显示 placeholder，opacity 会自然过渡回来（前提是 transition 已声明在 input 上）。
兼容性与注意事项
-
::placeholder在 Safari 9.1+、Chrome 47+、Firefox 51+ 支持，旧版需加私有前缀（如::-webkit-input-placeholder） -
:focus-within在 Safari 15.4+ 才完全支持，如需兼容老 Safari，改用input:focus::placeholder - 避免对
::placeholder使用transform或color+transition混合动画，opacity 最稳妥
进阶：配合 value 状态做更精细控制（需 JS 辅助）
如果希望「用户输入后 placeholder 完全消失、清空时再淡入」，纯 CSS 无法监听 value 变化，此时需 JS 切换 class：
input.addEventListener('input', function() {
this.classList.toggle('has-value', this.value.length > 0);
});CSS 配合：
input.has-value::placeholder {
opacity: 0;
}
input::placeholder {
transition: opacity 0.25s ease;
}这样就能实现更符合 UX 的交互效果。
