tailwind1-6  Exercise 3: A Table with Row States and Hover-Only Actions
=======================================================================

<table class="w-[500px] border-collapse text-left">
  <tbody>
    <tr id="r1" class="group odd:bg-gray-50 hover:bg-blue-50 has-checked:bg-blue-100">
      <td class="p-2"><input id="c1" type="checkbox"></td>
      <td class="p-2">Alpha</td>
      <td class="p-2"><button id="e1" class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100">Edit</button></td>
    </tr>
    ... two more rows the same way (r2, r3) ...
  </tbody>
</table>

  odd:bg-gray-50              zebra striping (rows 1 and 3)
  hover:bg-blue-50            highlight the row under the pointer
  has-checked:bg-blue-100     the row turns blue when a checkbox inside it is ticked (:has(:checked))
  group                       marks the row so the button can react to the ROW being hovered
  opacity-0 group-hover:opacity-100   the Edit button is invisible until the row is hovered
  focus-visible:opacity-100   ...or until the button itself is focused with the keyboard

Measured with real input in headless Chrome (background colours; Edit-button opacities for rows 1, 2, 3):

  at rest:               rows: gray-50, none, gray-50       Edit opacities: 0, 0, 0
  pointer over row 2:    rows: gray-50, blue-50, gray-50    Edit opacities: 0, 1, 0
  after ticking row 2's checkbox (pointer moved away):  rows: gray-50, blue-100, gray-50
  Tab to row 2's Edit button:  focused element "e2", opacity 1 (rows 1 and 3 buttons still 0)

WHY THIS WORKS AS AN ANSWER
---------------------------
The row is the group, so group-hover:opacity-100 on the button means "when my row is hovered", not "when I am hovered": hovering anywhere in row 2 revealed only row 2's button.
has-checked: looks inside the row: nothing in the row's own classes changes, yet it turns blue-100 as soon as a checkbox in it is ticked. It beats the hover colour on the same row
(measured: a ticked row with the pointer still over it stayed blue-100, while a hovered unticked row was the lighter blue-50) because it is generated later.
The keyboard check is the important one. Without focus-visible:opacity-100, a keyboard user could Tab onto an invisible button (opacity 0 still receives focus) and see nothing. With it,
the focused button fades in: measured opacity 1 on the focused row's button and 0 on the others. A hover-only control must always have a matching focus rule.
Touch screens never match hover, so on a phone these buttons would be permanently invisible. The v4 hover: variant is skipped on devices that cannot hover; for a design that has to
work on touch, keep the action visible there (for example show it by default and fade it only where hover exists).