Checkbox仅在Hover或选中时可见：选中项Mouseout后消失问题求助

需求：鼠标Hover时Checkbox必须可见；鼠标移出（mouseout）时，已选中的Checkbox需保持可见，未选中的则隐藏。当前仅Hover功能正常，但已选中的Checkbox在鼠标移出后会消失。

问题根源：CSS选择器优先级冲突。初始的.custom-nav-link .mud-checkbox选择器优先级高于.mud-checkbox:checked，导致选中状态的display: inline-block被初始的display: none覆盖。

修改后的CSS代码：

.custom-nav-link .mud-checkbox {
    display: none;
    position: absolute;
    top: 0;
    left: 130px;
}
.custom-nav-link:hover .mud-checkbox {
    display: inline-block;
}
/* 提升选择器优先级，确保选中状态样式生效 */
.custom-nav-link .mud-checkbox:checked {
    display: inline-block;
}

调整说明：

• 将.mud-checkbox:checked改为.custom-nav-link .mud-checkbox:checked，让它和初始隐藏选择器的优先级一致，且因代码顺序靠后，会覆盖初始的隐藏样式。
• 鼠标hover时，所有Checkbox通过.custom-nav-link:hover .mud-checkbox规则显示；鼠标移出后，未选中的Checkbox回到初始隐藏状态，已选中的则通过新增规则保持显示。

对应HTML代码无需修改：

<div class="d-flex align-items-center custom-nav-link">
    <MudNavLink Href="/dashboard" IconColor="Color.Secondary" Icon="@Icons.Material.Filled.Dashboard">My Dashboard </MudNavLink>
    <MudCheckBox @bind-Checked="@isdashboardChecked" class="mud-checkbox" Color="Color.Primary" CheckedIcon="@Icons.Material.Filled.Star" UncheckedIcon="@Icons.Material.Filled.StarOutline" Size="Size.Small"></MudCheckBox>
</div>

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