在Blazor wasm中實現行懸停的方法

Question

我有一個Blazor表格元件，根據一個集合的變數行數而改變：

<table id="MyTable" class="table table-hover">
    <thead>
        <tr>
            <th>專案名稱</th>
            <th>描述</th>
            <th>上傳者</th>
            <th>上傳日期</th>
        </tr>
    </thead>

    @foreach (var item in Items)
    {
        <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()">Do Work</button></th>
            </tr>
        </tbody>
    }
</table>

我需要做的是，當滑鼠懸停在某行上時，只有該行的特定元素才能啟用。

例如，如果這個表格有10行（1-10），當我懸停在第1行時，只有第1行的按鈕才應該可見和可點擊。其他按鈕，其父行沒有懸停，不應該啟用。

在Blazor中，如何在懸停在某行上時，僅啟用該特定行上的按鈕？

Answer 1

如評論中所提到的，有一些原因可能不希望在滑鼠懸停時顯示子元素：它依賴使用者使用滑鼠。另外，可以使整行可點擊，這可能會提供更好的用戶體驗。

雖然為了完整起見，這裡是如何解決我提出的問題：

在Razor頁面中，為行（父級）和按鈕（子級）HTML標籤新增CSS Id選擇器：

@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>
    }

然後，我們可以使用CSS在行（父級）上懸停時對按鈕（子級）套用樣式：

#FileTableRowButton {
  visibility: hidden;
}

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

根據您的用例，您可能想要套用不同的樣式。例如，使用display: none;而不是visibility: hidden;