Mudblazor Navigationmenü schweben Sie und klicken Sie auf Ausgabe ⇐ C#

[Anonymous]

Ich arbeite an einem Navigationsmenü mit Mudblazor und habe ein Problem mit den Schwebedingen und Klickeffekten gestoßen. Ich versuche, einen Schwebeffekt auf den gesamten Behälter jedes Navigationsverbaus anzuwenden, aber der Effekt wird nur auf den Mudnavlink selbst angewendet. Zusätzlich scheint es einen doppelten Schwebeffekt zu geben, der seltsam aussieht. < /P>
Hier sind die Stile, die ich verwende:
.mud-nav-link:hover:not(.mud-nav-link-disabled){
background-color: transparent;
}

.nav-item-container:hover {
background-color: rgba(0, 0, 0, 0.1);
}

.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled){
background-color: transparent;
}

.nav-item-container.active .mud-nav-link.active {
background-color: rgba(0, 0, 0, 0.1) !important;
}

.fixed-nav-menu {
width: 310px;
overflow-y: auto;
position: relative;
}

.nav-item-container {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px;
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: background-color 0.3s;
}

.nav-item-container .mud-icon-button {
margin-left: auto;
transition: color 0.3s;
font-size: 1rem;
color: grey;
}

.nav-item-container .mud-icon-button svg {
width: 1em;
height: 1em;
}

.mud-nav-link,
.mud-nav-group {
width: 100%;
}

.history-section {
padding-bottom: 60px;
}

.clear-button-container {
position: fixed;
bottom: 0;
width: 260px;
background-color: transparent;
text-align: center;
padding: 0;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}


< /code>
@page "/navmenu"
@using MudBlazor





Main Page




My Approvals & Actions




New Assessments




My Records




Risk Summary






< /code>
couldn't give the original solution as it was too big but tried to mimic the problem
The issue:
When I hover over the nav-item-container, the background color is not applied to the entire container.
The hover effect seems to apply twice, which looks odd.
When I click the MudNavLink, the hover effect is only applied to the MudNavLink, not the entire container.
Could someone help me understand how to make the hover and click effects apply to the entire container consistently?