html - 在@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。 ul li:hover label 的@media 查询完美运行。我不确定这是为什么。我怎样才能使它工作？

Answer 1

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

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

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

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

这比尝试覆盖样式要干净得多。