在css3中避免:hover在触屏移动端出现点击残留假死，最直接有效的做法是移除对:hover伪类的依赖，改用:focus或:focus-within配合outline:none来模拟交互反馈。这样当用户点击元素后，通过javascript添加一个.active类或者利用:focus状态来维持视觉变化，从而避免:hover带来的持续高亮问题。
为什么:hover会导致触屏设备上的点击残留？
:hover伪类在触屏设备上会触发点击事件，导致元素在被点击后仍然保持悬停状态，形成所谓的“点击残留”现象。这是因为触屏设备没有真正的鼠标悬停动作，但浏览器为了兼容PC端体验，会将点击视为悬停操作。
<style>
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.button:hover {
background-color: darkblue;
}
</style>
<button class="button">Click Me</button>
上述代码在触屏设备上点击按钮后，按钮背景色会变为darkblue并一直保持，直到再次点击其他地方。这就是典型的点击残留问题。
立即学习“前端免费学习笔记（深入）”；
如何正确使用:focus替代:hover？
使用:focus伪类可以解决点击残留问题，因为:focus只在元素获得焦点时生效，失去焦点后自动恢复原状。结合JavaScript动态添加.active类，可以在需要时手动控制样式变化。
<style>
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.button:focus {
outline: none;
background-color: darkblue;
}
.button.active {
background-color: darkblue;
}
</style>
<button class="button" id="myButton">Click Me</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
this.classList.toggle('active');
});
</script>
在这个例子中，点击按钮后会切换.active类，从而实现样式的动态变化。同时，:focus伪类确保了键盘导航时的可见性，而不会造成点击残留。
如何处理:focus-within的兼容性？
:focus-within是一个较新的CSS特性，它允许父元素在子元素获得焦点时应用样式。虽然现代浏览器支持良好，但在某些旧版本浏览器中可能不可用。因此，在使用前需确认目标用户的浏览器环境。
对于不支持:focus-within的情况，可以通过JavaScript监听子元素的focus和blur事件，手动切换父元素的样式。这种方法虽然稍显繁琐，但能确保在所有浏览器中都能正常工作。
