Enable content on row hover in Blazor wasm

Question

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?

Answer 1

As mentioned in the comments, there are reasons why one would not want to show a child element upon hover mouse hover: It relies on the user using a mouse. Also one could make the entire row clickable, which might be a better user experience.

Though for completeness, here is how to solve the problem I asked about:

In the razor page, add CSS Id selectors to the row (parent) and button (child) HTML tags:

@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>
    }

Thereafter, we can use CSS to apply styling to the button (child), whenever there is a hover over the row (parent):

#FileTableRowButton {
  visibility: hidden;
}

#FileTableRow {
  &:hover {
    #FileTableRowButton {
      visibility: visible;
    }
  }
}

Depending on your use case, you may want to apply different styling. For example, display: none; instead of visibility: hidden;