在 Blazor wasm 中启用行悬停内容

Question

我有一个 Blazor 表组件，其行数可变，基于集合：

<table id="MyTable" class="table table-hover">
    <thead>
        <tr>
            <th>Item Name</th>
            <th>Description</th>
            <th>Uploaded By</th>
            <th>Upload Date</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 页面中，将 CSS Id 选择器添加到行（父）和按钮（子）HTML 标签：

@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: hide;