Checkbox will become visible only upon hovering over it or when it is selected

'The requirement is that the checkbox should be visible when hovered over, but when not hovered over, the checkbox should be checked and invisible. The issue I am facing is that the checkbox disappears when checked and not hovered over.'

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

Answer №1

MudCheckBox is not simply an HTML element; it is a component made up of one or more HTML elements. Due to this structure, the :checked pseudo class selector cannot be used on it.

display

To work around this limitation, you can utilize the boolean field isdashboardChecked assigned to the Checked property to apply 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

Instead of using the display property, you can opt for the visibility CSS property. This will prevent the checkbox from affecting the layout when it is shown/hidden.

For example

https://i.sstatic.net/iSU3f.gif

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

MudBlazor Snippet

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to adjust the location of the scrollbar using CSS

Can the position of the scroll bar be modified using CSS to switch it from left to right or from bottom to top? ...

htmlcssscrollbar

Refine Your Search Findings

I have a code snippet that enables searching items from a dropdown menu with a search bar, but now I want to remove the dropdown and only keep the search functionality. How can I modify the code to separate the select feature from the independent search ...

javascriptjqueryhtmlcssangularjs

I am having trouble with the CSS Hover and Active styling on my website

Below is the code for my navigation bar: <ul> <li><a href="index.html">HOME</a></li> <li><a href="portfolio.html">PORTFOLIO</a></li> <li><a href="resources.html">RESOURCES</a ...

htmlcss

Use the no-repeat feature to set the background image in an Asp:Chart

I have been working with the asp:Chart control and have found that its BackImage property functions well. However, I have encountered two issues while trying to set the background image. I am unable to successfully set the no-repeat property of the Bac ...

asp.netcssbackground-imagepie-chartaspchart

Ways to mention an element in an if clause

Although this question may have been addressed before, I am having trouble finding the solution due to my inability to articulate the problem. Let me provide an example of the code: <script> function choose(element){ var parent = element.parent ...

javascripthtmlcss

Changing the Image Path According to the Device's Retina Ratio

I'm currently setting up a website for a photographer and working on creating a gallery. To streamline the process, I have automated many aspects such as file names, paths, widths, lightbox classes, etc. All I have to do in the HTML is write an <a ...

jquerycssretinaretina.js

Adjust the image size using CSS within the containing outer div

I am trying to adjust the width of an image using css within typo3. Unfortunately, I only have access to the outer div container which is the custom border of the content element. To make the change, I added the following line to my css file: .Bild-Starts ...

csstypo3

What is the best way to have my sliding panel automatically close when I click outside of it?

I have created a sleek sliding navigation panel for my website that appears when the screen width is reduced. Although I am satisfied with how it functions currently, I would like the panel to close when the user clicks/taps outside of it. What adjustments ...

javascriptjquerycssresponsive-designpanel

Modify the dimensions of the Jquery Datatables table to ensure it fits perfectly on the screen

I've been working on an app that utilizes jQuery Datatables, and I want to ensure that the tables maintain a consistent appearance regardless of the user's screen resolution. For instance, when viewed on a 1920x1366 display, the tables displ ...

javascriptjqueryhtmlcssdatatables

Adjust the width of a div container in Vue JS by dynamically setting it based on the dimensions of

I am currently working on a project that requires a dual scroll feature, where there will be a scroll bar both above and below the table. The table width will be determined by the user's action of adding more columns, making the width dynamic. Below ...

javascripthtmlcssvue.js

Displaying the products has an issue with the alignment of heights

I have a project in eCommerce that I'm working on. Currently, I am facing an issue where the height of the product list varies and disrupts the overall alignment when I insert additional content. Below is the code snippet I am using with Bootstrap 4: ...

cssbootstrap-4

Navigation problems resolved: The fixed-top class causes issues with navbar-right and obscures the logo

I have implemented a bootstrap Nav on this page To achieve a sticky top navigation, I used the fixed-top class. However, this caused the navbar to align left instead of right as intended. It also ended up covering my logo, which was originally aligned to ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to set up a dropdown menu in a data grid where the width matches the fields?

I am looking to optimize the layout for various screen resolutions and ensure compatibility with the latest versions of IE, Firefox, and Chrome. https://i.sstatic.net/3OLh0.jpg ...

javascripthtmlcss

An always-visible navigation menu

After exploring various resources related to the same topic, such as sticky navigation bars and others, I noticed that all the solutions provided involved the use of this link http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js. However, inc ...

jquerycssuinavigationbar

Issue with displaying background image in mobile device despite successful display in browser and Chrome tools on Angular 18

Revamping my personal website (www.coltstreet.com) led me to explore media queries for displaying different background images. Testing on desktop and via Chrome tools showed positive results, but the real challenge arose when viewing the site on my actual ...

htmlcssangularresponsive

Display additional information upon hovering without disrupting the neighboring elements

When I hover over a component, I want to display more details and scale it up. However, this action ends up displacing the surrounding components. Take a look at the screenshot for reference: https://i.sstatic.net/ElXvk.jpg Below is the code snippet wher ...

cssreactjsnext.jsmaterial-ui

@media doesn't seem to be functioning properly when the screen width is below

I've been working on making my website fully responsive, but I've run into an issue where it won't recognize anything below 980px in width. Here is the CSS code I'm using: @media screen and (max-width:1029px){ h1{ font-size ...

cssresponsive-designmedia-queries

Issue with implementing styles on Navbar React component

I'm currently learning Next.js, specifically working with version 10.0.3. In my project, I am using react-bootstrap version 1.4.0 and classnames version 2.2.6. Within my project, I have a component called Navbar that I am trying to style in a certain ...

cssreactjsnext.jsstyled-jsx

Modifying the color of the highlighted selection in a dropdown select box

Is it possible to change the blue highlight on this dropdown to gray? Check out this demo of a select box I am aiming to alter the highlight color to gray, can someone help me achieve this? select { border: 0; color: #EEE; background: transparen ...

css

Element width shrinks inside container query

Can you explain why using container-type: inline-size renders the span normally but collapses the button? <span style="container-type: inline-size; outline: 1px solid blue;"> This is a span </span> <button style="container-type: inli ...

htmlcsscontainer-queries