复选框仅在悬停或选中时可见

Question

'要求悬停时复选框必须可见，但鼠标悬停时选中的复选框必须可见，未选中的复选框必须不可见。我的问题是复选框悬停功能单独工作，但鼠标悬停时选中的复选框消失了'

    .custom-nav-link .mud-checkbox {
    display: none;
    position: absolute;
    top: 0;
    left: 130px;
    }
    .custom-nav-link:hover .mud-checkbox {
     display: inline-block;
    }
    .mud-checkbox:checked {
     display: inline-block;
    }

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

Answer 1

MudCheckBox

是一个组件而不是元素，即它是 html 元素的组合，这就是为什么你不能在其上使用

:checked

伪类选择器。

您可以执行以下操作：使用分配给

isdashboardChecked

属性的

Checked

bool 字段来添加条件类。

<style>
    .custom-nav-link .my-checkbox-unchecked{
    display: none;
    }
    .custom-nav-link:hover .my-checkbox-unchecked{
     display: inline-block;
    }

</style>
<MudPaper Width="250px" Class="py-3" Elevation="0">
    <MudNavMenu>
        <MudText Typo="Typo.h6" Class="px-4">My Application</MudText>
        <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="@GetCheckboxClass"  Color="Color.Primary"  CheckedIcon="@Icons.Material.Filled.Star" UncheckedIcon="@Icons.Material.Filled.StarOutline" Size="Size.Small"></MudCheckBox>
        </div>
    </MudNavMenu>
</MudPaper>
@code{
    bool isdashboardChecked = false;
    private string GetCheckboxClass => isdashboardChecked?"my-checkbox-checked":"my-checkbox-unchecked";
}

MudBlazor 片段