Seperti yang dinyatakan dalam ulasan, terdapat beberapa sebab mengapa anda mungkin tidak mahu menunjukkan elemen kanak-kanak pada tetikus: ia bergantung pada pengguna yang menggunakan tetikus. Sebagai alternatif, keseluruhan baris boleh dibuat boleh diklik, yang mungkin memberikan pengalaman pengguna yang lebih baik.

Namun demi kesempurnaan, inilah cara untuk menyelesaikan masalah yang saya tanya:

Dalam halaman Razor, tambahkan pemilih Id CSS untuk tag HTML baris (ibu bapa) dan butang (anak):

@foreach (var item in Items)
    {
        <tbody>
            <tr id="FileTableRow">
                <th>@item.Name</th>
                <th>@item.Description</th>
                <th>@item.UserName</th>
                <th>@item.UploadDate.ToString("dd-MM-yyyy")</th>
                <th><button id="FileTableRowButton" type="button" class="btn btn-primary" @onclick="() => DoSomething()">Do Work</button></th>
            </tr>
        </tbody>
    }

Kami kemudiannya boleh menggunakan CSS untuk menggunakan gaya pada butang (anak) pada tuding di atas baris (ibu bapa):

#FileTableRowButton {
  visibility: hidden;
}

#FileTableRow {
  &:hover {
    #FileTableRowButton {
      visibility: visible;
    }
  }
}

Bergantung pada kes penggunaan anda, anda mungkin mahu menggunakan gaya yang berbeza. Contohnya, gunakan paparan: tiada; dan bukannya keterlihatan: tersembunyi;