在@media CSS查询上设置透明悬停的问题

Question

我有一个侧边栏，当使用移动设备在侧边栏上滚动时，我只希望滚动而不是悬停。根据我之前看到的答案，我采用了这种方法（仅CSS解决方案！）：

  /* default hover class on list items*/
  ul li:hover .check {
  border: 4px solid #FFFFFF;
}

/* default hover class on list items when checked*/
ul li:hover .check {
border: 4px solid #FFFFFF;
}


/* for mobile, set hover-color on list items to be same as un-hovered list items --THIS IS WORKING*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover label {
    color: #AAAAAA;
    background: transparent;
  }
}

/* for mobile, set hover-color on checkmark items to be same as un-hovered checkmark items -- THIS IS NOT WORKING, this color is not applied to the checkbox*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover .check{
    color: #AAAAAA;
    background: transparent;
  }
}

/* catch-all - set hover color on all list items to be same as un-hovered*/
@media all and (min-width:320px) and (max-width: 960px) {
    ul li:hover {
    color: #AAAAAA;
    background: transparent;
  }
}

问题是@media查询无法识别ul li:hover .check。@media查询ul li:hover label非常有效。我不确定为什么会这样，对于如何进行这项工作的任何反馈将不胜感激！谢谢。

Answer 1

将所有悬停样式放入此媒体查询中-

@media screen and (hover: hover) {
  //styles go here
}

如果设备支持悬停，则仅允许悬停样式。移动设备显然将不支持悬停。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/hover

这比尝试覆盖样式更干净。