<p>Ich habe eine Blazor-Tabellenkomponente, die sich basierend auf der Anzahl der Variablenzeilen in einer Sammlung ändert: </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>Was ich tun muss, ist, wenn die Maus über einer Zeile schwebt,<em>nur</em>das spezifische Element dieser Zeile aktiviert. </p> <p>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. </p> <p>Wie aktiviere ich in Blazor nur die <em>-Schaltflächen in dieser bestimmten Zeile</em>, wenn ich mit der Maus über eine Zeile fahre? </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;
    }
  }
}