So implementieren Sie den Zeilen-Hover in Blazor wasm

Question

Ich habe eine Blazor-Tabellenkomponente, die sich basierend auf der Anzahl der Variablenzeilen in einer Sammlung ändert:

<table id="MyTable" class="table table-hover">
    <thead>
        <tr>
            <th>Projektname</th>
            <th>Beschreibung</th>
            <th>Uploader</th>
            <th>Upload-Datum</th>
        </tr>
    </thead>

    @foreach (var-Element 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>

Was ich tun muss, ist, wenn die Maus über einer Zeile schwebt,nurdas spezifische Element dieser Zeile aktiviert.

Wenn diese Tabelle beispielsweise 10 Zeilen (1–10) hat und ich den Mauszeiger über Zeile 1 bewege, sollte nur die Schaltfläche für Zeile 1 sichtbar und anklickbar sein. Andere Schaltflächen, deren übergeordnete Zeile keinen Hover hat, sollten nicht aktiviert werden.

Wie aktiviere ich in Blazor nur die -Schaltflächen in dieser bestimmten Zeile, wenn ich mit der Maus über eine Zeile fahre?

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;