Blazor多Div场景下实现鼠标悬停单独修改CSS的问题求助

原代码的问题在于使用了全局的Imgdisplay和_IsHovering变量，所有循环生成的卡片会共享同一状态，导致鼠标悬停时所有图片都会被隐藏。要实现仅修改触发事件的特定元素样式，需要为每个列表项维护独立的悬停状态，以下是两种可行方案：

方案1：使用字典存储独立状态（适合无需拆分组件的场景） #

通过字典记录每个列表项的悬停状态，确保仅更新触发事件的项：

@foreach (var item in RootOfJson.results)
{
    <div class="card" 
         @onmouseout="@(() => OnMouseOut(item.Id))" 
         @onmouseover="@(() => OnMouseOver(item.Id))"> 
        <img class="@(_hoverStates.TryGetValue(item.Id, out var isHovered) && isHovered ? "d-none" : "")" 
             src="@item.image_url"  
             alt="卡片图片">                                             
    </div>
}

@code {
    // 用字典存储每个item的悬停状态，key为item的唯一标识（示例用Id，可替换为其他唯一属性）
    private Dictionary<int, bool> _hoverStates = new();

    protected void OnMouseOver(int itemId)
    {
        if (!_hoverStates.ContainsKey(itemId) || !_hoverStates[itemId])
        {
            _hoverStates[itemId] = true;
        }
    }

    protected void OnMouseOut(int itemId)
    {       
        if (_hoverStates.ContainsKey(itemId))
        {
            _hoverStates[itemId] = false;
        }
    }
}

关键说明： #

• 用字典的key绑定列表项的唯一标识（如Id），确保每个项的状态独立
• 通过Lambda表达式在鼠标事件中传递当前项的标识，精准更新对应状态
• 动态绑定图片的class，根据当前项的悬停状态决定是否添加d-none

如果列表项没有Id属性，可替换为其他唯一值（如image_url），只需将字典的key类型改为string即可。

方案2：组件化拆分（推荐，符合Blazor设计理念） #

将每个卡片拆分为独立子组件，每个组件自行维护悬停状态，代码更易维护：

子组件：CardItem.razor #

<div class="card" @onmouseout="OnMouseOut" @onmouseover="OnMouseOver"> 
    <img class="@(_isHovering ? "d-none" : "")" 
         src="@ImageUrl"  
         alt="卡片图片">                                             
</div>

@code {
    [Parameter]
    public string ImageUrl { get; set; }

    private bool _isHovering;

    private void OnMouseOver() => _isHovering = true;
    private void OnMouseOut() => _isHovering = false;
}

父组件调用 #

@foreach (var item in RootOfJson.results)
{
    <CardItem ImageUrl="@item.image_url" />
}

关键说明： #

• 每个卡片组件独立管理自身的悬停状态，避免全局状态污染
• 父组件只需传递图片URL，无需关心子组件的状态逻辑，代码职责更清晰

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