<h2><code>@media (hover: hover)</code> と <code>:where(:any-link, :enabled, summary):hover</code> のホバースタイル</h2>

<a href="" class="button-good-hover">a要素（href属性あり）</a>
<a class="button-good-hover">a要素（href属性なし）</a>
<button class="button-good-hover">button要素</button>
<button disabled class="button-good-hover">button要素（disabled）</button>

<details>
  <summary class="button-good-hover">summary要素</summary>
  detailsの中身
</details>
<span class="button-good-hover">span要素</span>
<div class="button-good-hover">div要素</div>

<h2><code>:hover</code> のみのホバースタイル</h2>
<a href="" class="button-bad-hover">a要素（href属性あり）</a>
<a class="button-bad-hover">a要素（href属性なし）</a>
<button class="button-bad-hover">button要素</button>
<button disabled class="button-bad-hover">button要素（disabled）</button>

<details>
  <summary class="button-bad-hover">summary要素</summary>
  detailsの中身
</details>
<span class="button-bad-hover">span要素</span>
<div class="button-bad-hover">div要素</div>

.button-good-hover,
.button-bad-hover {
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  border: none;
  background-color: #9f9;
  font-size: 1rem;
}

@media (hover: hover) {
  .button-good-hover:where(
    :any-link, :enabled, summary
  ):hover {
    box-shadow: 2px 2px 4px #999;
    background-color: #f99;
  }
}

.button-bad-hover:hover {
  box-shadow: 2px 2px 4px #999;
  background-color: #f99;
}

/* 見やすさのためのスタイル */
body {
  display: grid;
  justify-items: start;
  row-gap: 8px;
  padding: 0 5% 80px;
}

code {
  font-family: Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;
}

h2 {
  font-size: 1.25rem;
}