Checkbox only visible when it is hovered or checked

Issue

'Requirement is onhover checkbox must be visible but onmouseout checked checkbox must be visible and unchecked checkbox must be invisible.My problem is Checkbox hovering function alone works but checked Checkbox on mouseout disappears'

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

Solution

MudCheckBox is a component not an element i.e. it is a combination of one or more HTML elements, that's why you cannot use the :checked pseudo class selector on it.

display

Here's what you can do instead, use the isdashboardChecked bool field assigned to the Checked property to add conditional classes instead.

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

---

visibility

You can use visibility CSS property instead of display. With this, the checkbox wont displace other elements when it is visible/hidden.

For example

<style>
    .custom-nav-link .my-checkbox-unchecked{
        visibility: hidden;
    }
    .custom-nav-link:hover .my-checkbox-unchecked{
        visibility: visible;
    }
</style>

MudBlazor Snippet

Answered By - RBee