手机上点过卡片后,文字颜色一直保持悬停状态,直到点别处。碰到这种情况,我一般先确认改动有没有真的生效。
原因不复杂,触屏浏览器会把最后一次点击当作悬停,样式没有区分输入设备。
「hover 触屏粘住」这类改动最怕改一半,回滚脚本先准备好,再动生产。报错里带路径的,先去看那个路径在不在、权限对不对。
@media (hover: hover) and (pointer: fine) {
.card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
}
同一份配置存在多处的,先确认改的是被加载的那一份。新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。
备份不是备了就行,恢复一次才算数,很多备份文件打开才发现是空的。接口问题先分清是没发出去、发出去了没收到,还是收到了处理失败。
偶发问题先统计频率,一小时几次和一天一次,查法完全不同。
具体做法是,用媒体特性限定悬停能力;把关键反馈放在点击态;避免依赖悬停展示内容。
最后用这个标准收尾,手机上不再出现粘住的悬停效果,桌面悬停正常。