CSS: Media query hover

Media query feature for testing mouse hover

this is for @media query

(hover: hover)

The user can hover (mouse, trackpad, stylus, etc.)

(hover: none)

The user cannot hover properly (most touch phones and tablets)

Example

@scope {
 .wDyGZ {
  width: 200px;
  height: 200px;
  margin: 8px;
  padding: 8px;
 }

 @media (hover: hover) {
  .wDyGZ {
   border: solid 6px green;
  }
 }

 @media (hover: none) {
  .wDyGZ {
   border: solid 6px red;
  }
 }
}