Bagaimana untuk melaksanakan row hover dalam Blazor wasm

Question

Saya mempunyai komponen jadual Blazor yang berubah berdasarkan bilangan baris pembolehubah dalam koleksi:

<table id="MyTable" class="table table-hover">
    <kepala>
        <tr>
            <th>Nama projek</th>
            <th>Penerangan</th>
            <th>Pemuat naik</th>
            <th>Tarikh Muat Naik</th>
        </tr>
    </kepala>

    @foreach (var item dalam Item)
    {
        <tbody>
            <tr>
                <th>@item.Name</th>
                <th>@item.Description</th>
                <th>@item.UserName</th>
                <th>@item.UploadDate.ToString("dd-MM-yyyy")</th>
                <th><button type="button" class="btn btn-primary" @onclick="() => DoSomething()">Lakukan</button></th>
            </tr>
        </tbody>
    }
</table>

Apa yang perlu saya lakukan ialah, apabila tetikus melayang di atas baris,hanyaelemen khusus baris itu menjadi didayakan.

Sebagai contoh, jika jadual ini mempunyai 10 baris (1-10), apabila saya menuding di atas baris 1, hanya butang untuk baris 1 harus kelihatan dan boleh diklik. Butang lain yang baris induknya tidak mempunyai tuding tidak boleh didayakan.

Dalam Blazor, bagaimana saya boleh mendayakan butang pada baris tertentu itu

Answer 1

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;