Blazor WebAssembly中如何实现行悬停时仅显示对应行按钮

首先先纠正你原代码里的一个问题：不要在foreach里循环创建<tbody>，一个表格应该只有一个<tbody>（除非有分组需求），正确的结构是把<tbody>放在循环外面，只循环<tr>。

方案一：纯CSS实现（推荐，无需C#逻辑） #

这是最简单的方式，利用CSS的:hover伪类控制按钮的显示/隐藏，不需要修改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>
            <th></th> <!-- 预留按钮列的表头，避免布局偏移 -->
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr>
                <td>@item.Name</td>
                <td>@item.Description</td>
                <td>@item.UserName</td>
                <td>@item.UploadDate.ToString("dd-MM-yyyy")</td>
                <td>
                    <!-- 给按钮加自定义类，默认隐藏 -->
                    <button type="button" class="btn btn-primary btn-row-action" 
                            @onclick="() => DoSomething(item)">Do Work</button>
                </td>
            </tr>
        }
    </tbody>
</table>

<style>
/* 默认隐藏按钮 */
.btn-row-action {
    opacity: 0;
    pointer-events: none; /* 不可点击 */
    transition: opacity 0.2s ease; /* 平滑过渡效果 */
}

/* 当行被悬停时，显示按钮 */
#MyTable tbody tr:hover .btn-row-action {
    opacity: 1;
    pointer-events: auto; /* 恢复可点击 */
}
</style>

说明： #

• opacity: 0让按钮透明，比display: none更友好（不会导致布局跳动）
• pointer-events: none确保未悬停时按钮无法被点击
• 加过渡动画让显示/隐藏更流畅
• 修正了原代码里用<th>显示内容的问题，表格内容应该用<td>，<th>是表头单元格

方案二：Blazor交互控制（适合复杂场景） #

如果需要在悬停时执行额外的C#逻辑，可以通过跟踪当前悬停的Item ID来控制按钮状态：

步骤1：添加组件级变量 #

@code {
    // 假设你的Item模型有一个Id属性，用来标识行
    private int? _hoveredItemId;

    // 模拟你的Items集合
    private List<Item> Items = new List<Item>();

    private void DoSomething(Item item)
    {
        // 你的业务逻辑
    }

    // 定义Item模型示例
    public class Item
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string UserName { get; set; }
        public DateTime UploadDate { get; set; }
    }
}

步骤2：修改表格代码 #

<table id="MyTable" class="table table-hover">
    <thead>
        <tr>
            <th>Item Name</th>
            <th>Description</th>
            <th>Uploaded By</th>
            <th>Upload Date</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr @onmouseover="() => _hoveredItemId = item.Id" 
                @onmouseout="() => _hoveredItemId = null">
                <td>@item.Name</td>
                <td>@item.Description</td>
                <td>@item.UserName</td>
                <td>@item.UploadDate.ToString("dd-MM-yyyy")</td>
                <td>
                    <button type="button" class="btn btn-primary" 
                            @onclick="() => DoSomething(item)"
                            style="@(_hoveredItemId == item.Id ? "opacity:1; pointer-events:auto;" : "opacity:0; pointer-events:none;")">
                        Do Work
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>

说明： #

• 通过@onmouseover和@onmouseout更新_hoveredItemId变量
• 根据_hoveredItemId是否等于当前Item的Id，动态设置按钮的样式
• 如果需要更复杂的状态控制（比如禁用按钮而非隐藏），可以修改disabled属性：disabled="@(_hoveredItemId != item.Id)"

内容的提问来源于stack exchange，提问作者Divan