Blazor中在鼠标移动触发时为元素添加类的实现方案探讨——无法仅依赖CSS :hover的场景

你完全可以在Blazor里搞定这个需求，根本不需要借助JS互操作——Blazor本身的事件绑定和状态管理就能完美解决你的问题，还能轻松配合keydown这类其他事件来控制类的变化。

下面给你一个具体的实现示例，完全贴合你的场景：

首先，在你的Blazor组件里，我们可以通过跟踪当前被鼠标移动触发的item标识，来动态控制li的class：

<ul>
    @foreach (var item in ItemList)
    {
        <li 
            @onmousemove="() => OnItemMouseMove(item.Id)"
            @onmouseleave="() => OnItemMouseLeave(item.Id)"
            class="@(CurrentHoverItemId == item.Id ? "active-hover" : "")">
            @item.Text
        </li>
    }
</ul>

@code {
    // 模拟你的列表数据
    private List<ListItem> ItemList = new()
    {
        new ListItem { Id = "item1", Text = "Item 1" },
        new ListItem { Id = "item2", Text = "Item 2" },
        new ListItem { Id = "item3", Text = "Item 3" }
    };

    // 跟踪当前触发mousemove的item ID
    private string? CurrentHoverItemId;

    private void OnItemMouseMove(string itemId)
    {
        // 只有当当前item不是已高亮的那个时才更新，避免不必要的状态变更
        if (CurrentHoverItemId != itemId)
        {
            CurrentHoverItemId = itemId;
        }
    }

    private void OnItemMouseLeave(string itemId)
    {
        // 鼠标离开时清除高亮状态（可选，根据你的需求调整）
        if (CurrentHoverItemId == itemId)
        {
            CurrentHoverItemId = null;
        }
    }

    // 对应你的keydown场景：比如按下ESC键时强制清除所有高亮
    private void HandleGlobalKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Escape")
        {
            CurrentHoverItemId = null;
        }
    }

    // 列表项模型
    private class ListItem
    {
        public string Id { get; set; } = string.Empty;
        public string Text { get; set; } = string.Empty;
    }
}

逻辑说明： #

• 每个<li>都绑定了@onmousemove事件，当鼠标在该元素上移动时，会触发OnItemMouseMove方法，更新CurrentHoverItemId为当前item的ID。
• 通过Blazor的动态class绑定，当CurrentHoverItemId匹配当前item的ID时，就会给<li>加上active-hover类（你可以替换成自己需要的类名）。
• 针对你提到的keydown事件修改class导致类丢失的场景：你只需要在keydown的处理方法里直接修改CurrentHoverItemId即可（比如上面示例里的HandleGlobalKeyDown），Blazor会自动响应状态变化，实时更新UI的class，完全不需要等下一次mousemove触发。

这个方案全程用Blazor的C#代码处理，不需要写任何JS，状态管理也更清晰，完美适配你的需求。

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