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

sqyvllje 于 4个月前发布在其他

关注(0)|答案(1)|浏览(77)

'要求是onhover复选框必须可见，但onmouseout复选框必须可见，未选中的复选框必须不可见。我的问题是复选框悬停功能单独工作，但选中的复选框在mouseout消失'

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

个字符

css

来源：https://stackoverflow.com/questions/77710013/checkbox-only-visible-when-it-is-hovered-or-checked

1条答案

按热度按时间

oxf4rvwz1#

MudCheckBox是一个组件而不是一个元素，即它是一个或多个HTML元素的组合，这就是为什么你不能在它上面使用:checked伪类选择器。

`display`

下面是你可以做的，使用分配给Checked属性的isdashboardChecked 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 Snippet

`visibility`

你可以使用visibility CSS属性代替display。这样，复选框在可见/隐藏时不会取代其他元素。

例如

x1c 0d1x的数据

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

型
MudBlazor Snippet的

赞(0）回复(0）举报 4个月前

我来回答

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

1条答案

`display`

`visibility`

例如

相关问题

热门标签

最新问答