<p>我有一個Blazor表格元件，根據一個集合的變數行數而改變：</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>我需要做的是，當滑鼠懸停在某行上時，<em>只有</em>該行的特定元素才能啟用。 </p> <p>例如，如果這個表格有10行（1-10），當我懸停在第1行時，只有第1行的按鈕才應該可見和可點擊。其他按鈕，其父行沒有懸停，不應該啟用。 </p> <p>在Blazor中，如何在懸停在某行上時，僅啟用<em>該特定行上的按鈕</em>？ </p>

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

#FileTableRowButton {
  visibility: hidden;
}

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