HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>CSS any-hover vs hover Comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 1.5rem;
      line-height: 1.55;
    }

    .item {
      padding: 0.75rem 1rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.4rem;
      margin-bottom: 0.75rem;
      max-width: 22rem;
    }

    .tip {
      font-size: 0.8125rem;
      color: #64748b;
      margin-top: 0.35rem;
    }

    /* Primary input only */
    @media (hover: hover) {
      .item-hover .tip-hover {
        display: none;
      }
      .item-hover:hover .tip-hover {
        display: block;
      }
    }

    /* Any input — safer for hybrid devices */
    @media (any-hover: hover) {
      .item-any {
        cursor: pointer;
      }
      .item-any:hover {
        background: #eff6ff;
        border-color: #93c5fd;
      }
    }

    @media (any-hover: none) {
      .item-any .tip-any {
        display: block;
      }
    }

    @media (any-hover: hover) {
      .item-any .tip-any {
        display: none;
      }
    }
  </style>
</head>
<body>
  <h1>any-hover vs hover</h1>

  <div class="item item-hover">
    <strong>(hover: hover)</strong> — primary input only
    <div class="tip tip-hover">Extra info shown on hover</div>
  </div>

  <div class="item item-any">
    <strong>(any-hover: hover)</strong> — any input can hover
    <div class="tip tip-any">Always visible on touch-only devices</div>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS any-hover vs hover Media Feature