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

Question

我有一个侧边栏，当使用mobile在侧边栏上滚动时，我只希望滚动而不是悬停。基于我之前看到的答案，我采用了这种方法（仅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。对于ul li:hover label的@media查询可以正常工作。我不确定为什么会这样，对于如何进行这项工作的任何反馈将不胜感激！谢谢。

Answer 1

您是否尝试过使用复选标记而不是li悬停？

@media all and (min-width:320px) and (max-width: 960px) {
    ul li .check:hover {
    color: #AAAAAA;
    background: transparent;
  }
}