解决hover样式对移动端的影响

问题：有时候PC端需要hover样式，而移动端正常是没有hover效果的，但是原本的样式会受到影响

例子如下：

CSS主要代码：

.menu-item:hover{
    color: red;
  }

以上代码在PC端效果表现为鼠标悬停在菜单项上时文字变红色，在移动端上为以下效果：

没有鼠标所以没有悬停效果：

点击菜单项时文字变红色：

当点击一级菜单后转为二级菜单列表时，原本一级菜单变红的位置依然保留文字红色的样式，使得该位置的二级菜单未点击状态就是红色的：

诉求：实现PC端有hover样式而移动端没有任何效果

解决方法: CSS样式修改，用如下代码替换

.menu-item {
    @media (any-hover: hover) {
      color: red;
    }
}

媒体特性“any-hover”的相关说明：

放在最后：以上仅为个人学习记录，如有不正确或不恰当的表述欢迎指出，共同学习~