在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;