移动端触发hover后样式不消失

1,174 阅读1分钟

问题:在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也有相关问题:

stackoverflow.com/questions/4…