Issue with setting a transparent hover on @media CSS query

Question

I have a sidebar, and when scrolling on the sidebar using mobile, I would like only scrolling to be possible, and not hovering. I've taken this approach (a CSS-only solution!), based on answers I've seen previously:

  /* 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;
  }
}

The issue is that the @media query doesn't recognize the ul li:hover .check. The @media query for ul li:hover label works perfectly. I'm not sure why this is. How can I make this work?

Answer 1

Put all of your hover styles in this media query -

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

This will only allow the hover styles if the device supports hovering. Mobile will obviously not support hovering.

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

This is way cleaner than trying to override styles.

Answer 2

Probably a good starting point would be to look at

@media(hover:hover) and (pointer: coarse){
    //your media query css properties
}

The primary input mechanism can conveniently hover over elements.

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