I have a Blazor table component with a variable number of rows, based on a collection:
<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>What I need to do, is enable a specific element, only when a mouse hover is actioned on that element's row.
For example, if I have 10 rows in this table (1-10), and I hover over row number 1, only the button on row no.1 should be visible and clickable. The rest of the buttons, who's parent rows are not hovered over, should not be enabled.
How do I enable the button on only that specific row, upon hovering over a row, in Blazor?