如何使用CSS移除移动端菜单的:hover属性

下面给你几种靠谱的重置方法，按需选择即可：

• 用unset批量重置
  这个关键字会把属性还原成「继承自父元素的值」或者「浏览器初始值」，适合快速清空桌面端给:hover加的所有样式：

  .menu-item:hover {
    color: #fff;
    background-color: #333;
    border-radius: 4px;
  }
  
  /* 假设移动端断点为768px */
  @media (max-width: 768px) {
    .menu-item:hover {
      color: unset;
      background-color: unset;
      border-radius: unset;
      /* 把你之前设置的所有hover属性都用unset列出来 */
    }
  }
  

• 用initial重置为浏览器默认值
  和unset不同，initial会强制把属性变回浏览器的默认样式，不受父元素继承值影响：

  @media (max-width: 768px) {
    .menu-item:hover {
      color: initial;
      background-color: initial;
      padding: initial;
    }
  }
  

• 直接覆盖为默认状态的样式
  如果菜单有默认的非hover样式，直接把:hover的属性改成和默认样式一致即可，这种方式最直观，不容易出问题：

  /* 菜单默认样式 */
  .menu-item {
    color: #555;
    background-color: transparent;
    padding: 6px 10px;
  }
  
  /* 桌面端hover样式 */
  .menu-item:hover {
    color: #fff;
    background-color: #222;
    padding: 6px 14px;
  }
  
  /* 移动端重置hover */
  @media (max-width: 768px) {
    .menu-item:hover {
      color: #555;
      background-color: transparent;
      padding: 6px 10px;
    }
  }
  

注意：务必把媒体查询代码写在桌面端hover样式的后面，否则会被桌面样式覆盖，导致重置不生效。

内容的提问来源于stack exchange，提问作者Kreuterkeule