如何检测自动填充列表鼠标悬停事件并隐藏自定义占位符span元素

可以通过匹配浏览器自动填充相关的CSS伪类结合兄弟选择器实现目标效果，不需要额外编写JS代码，仅修改CSS即可：

新增CSS规则 #

在你原有CSS的基础上添加以下代码：

/* 适配自动填充悬停、输入有值、聚焦场景下隐藏自定义占位符 */
input:not(:placeholder-shown) ~ span.placeholder,
input:focus ~ span.placeholder,
/* webkit内核浏览器自动填充相关状态兼容 */
input:-webkit-autofill:hover ~ span.placeholder,
input:-webkit-autofill:focus ~ span.placeholder,
input:-webkit-autofill:active ~ span.placeholder,
/* 标准规范自动填充相关状态适配 */
input:autofill:hover ~ span.placeholder,
input:autofill:focus ~ span.placeholder,
input:autofill:active ~ span.placeholder {
    /* 如需更自然的渐隐过渡效果，可替换为下方注释的两行代码 */
    display: none;
    /* opacity: 0;
    transition: opacity 0.15s ease; */
}

规则说明 #

• 浏览器悬停自动填充选项时会触发input元素的autofill:hover状态，通过兄弟选择器~就能控制相邻的span.placeholder显隐
• 兼容Chrome、Safari等webkit内核浏览器需要额外加-webkit-前缀的对应伪类
• :not(:placeholder-shown)匹配输入框已有内容的场景，确保输入完成后占位符不会复现
• 用opacity配合transition实现的渐隐效果和原生placeholder体验更一致，可根据需求选择

完整可运行代码 #

HTML #

<form>
    <div class="inputs_div">
        <input type="text" name="username" />
        <span class="placeholder">User Name</span>
    </div>
</form>

CSS #

form {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

form input {
    position: absolute;
    font-size: 16px;
    height: 100%;
    display: block;
    background: transparent;
    border: none;
    margin: 0;
    outline: none;
    width: calc(100% - 10px);
    top: 0;
    left: 0;
    padding: 0px 5px;
}

div.inputs_div {
    position: relative;
    width: 200px;
    height: 22px;
    display: block;
    background: #fff;
    padding: 5px 5px;
    border: 1px solid black;
}

span.placeholder {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    display: block;
    font-size: 16px;
    pointer-events: none;
    /* 如果使用过渡效果，这里需要加上默认透明度配置
    opacity: 1;
    transition: opacity 0.15s ease;
    */
}

/* 适配自动填充悬停、输入有值、聚焦场景下隐藏自定义占位符 */
input:not(:placeholder-shown) ~ span.placeholder,
input:focus ~ span.placeholder,
input:-webkit-autofill:hover ~ span.placeholder,
input:-webkit-autofill:focus ~ span.placeholder,
input:-webkit-autofill:active ~ span.placeholder,
input:autofill:hover ~ span.placeholder,
input:autofill:focus ~ span.placeholder,
input:autofill:active ~ span.placeholder {
    display: none;
    /* 如果使用过渡效果替换上面的display:none为下方代码
    opacity: 0;
    */
}

内容的提问来源于stack exchange，提问作者Aso