HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS hover vs any-hover</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 2rem;
      margin: 0;
    }

    .badge {
      display: inline-block;
      padding: 0.5rem 0.75rem;
      border-radius: 0.35rem;
      font-size: 0.8125rem;
      font-weight: 600;
      margin: 0.35rem 0.35rem 0.35rem 0;
      background: #f1f5f9;
      color: #64748b;
    }

    @media (hover: hover) {
      .primary-badge {
        background: #dbeafe;
        color: #1d4ed8;
      }
    }

    @media (any-hover: hover) {
      .any-badge {
        background: #dcfce7;
        color: #15803d;
      }
    }
  </style>
</head>
<body>
  <h1>Hover Detection</h1>
  <span class="badge primary-badge">hover: primary input</span>
  <span class="badge any-badge">any-hover: any input</span>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS hover - vs any-hover