问题:在pc上设置hover添加背景色,但是在移动端点击后hover的样式不消失。
在网上搜到添加<body ontouchstart=""></body>或document.body.addEventListener(‘touchstart’, function(){ });两种办法都无效。
解决方法:在material ui中找到解决方法是在css中添加@media (hover:none) {``background-color``:`` ``transparent``;``}覆盖hover样式来解决
在mdn developer.mozilla.org/en-US/docs/… 上查到关于@media hover的解释是:
定义用户的主要输入机制是否可以悬停在元素之上来应用样式
- none: 主输入机制不能hover或不方便hover
- hover:主输入机制可以方便的进行hover
stackoverflow也有相关问题: