<div class="wrapper">
<h2 class="title">pointer</h2>
<div class="container">
    <div class="box pointer none">none</div>
    <div class="box pointer coarse">coarse</div>
    <div class="box pointer fine">fine</div>
</div>
<h2 class="title">hover</h2>
<div class="container">
    <div class="box m-hover none">none</div>
    <div class="box m-hover hover">hover</div>
</div>
<h2 class="title">any-pointer</h2>
<div class="container">
    <div class="box any-pointer none">none</div>
    <div class="box any-pointer coarse">coarse</div>
    <div class="box any-pointer fine">fine</div>
</div>
<h2 class="title">any-hover</h2>
<div class="container">
    <div class="box any-hover none">none</div>
    <div class="box any-hover hover">hover</div>
</div>
</div>
.wrapper {
  border:1px solid;
  background-color:#000;
}

.container {
    display: flex;
  padding:0 50px 0 50px;
    flex-wrap: wrap;
    gap: 10px;
}

.title {
  padding:0 50px 0 50px;
  color:#fff;
}

.box {
    display: flex;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    background: #eee;
  margin-bottom:20px;
}

@media (pointer: none) {
    .pointer.none {
        background: #99fe5c;
    }
}

@media (pointer: coarse) {
    .pointer.coarse {
        background: #99fe5c;
    }
}

@media (pointer: fine) {
    .pointer.fine {
        background: #99fe5c;
    }
}

@media (hover: none) {
    .m-hover.none {
        background: #99fe5c;
    }
}

@media (hover: hover) {
    .m-hover.hover {
        background: #99fe5c;
    }
}

@media (any-pointer: none) {
    .any-pointer.none {
        background: #99fe5c;
    }
}

@media (any-pointer: coarse) {
    .any-pointer.coarse {
        background: #99fe5c;
    }
}

@media (any-pointer: fine) {
    .any-pointer.fine {
        background: #99fe5c;
    }
}

@media (any-hover: none) {
    .any-hover.none {
        background: #99fe5c;
    }
}

@media (any-hover: hover) {
    .any-hover.hover {
        background: #99fe5c;
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.