Проблема с наведением и щелчком мыши в меню навигации MudBlazor ⇐ C#

[Anonymous]

Я работаю над меню навигации с помощью MudBlazor и столкнулся с проблемой с эффектами наведения и щелчка. Я пытаюсь применить эффект наведения ко всему контейнеру каждой навигационной ссылки, но эффект применяется только к самому MudNavLink. Кроме того, эффект двойного наведения выглядит странно.
Вот стили, которые я использую:

Код: Выделить всё

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

Код: Выделить всё

@page "/navmenu"
@using MudBlazor





Main Page




My Approvals & Actions




New Assessments




My Records




Risk Summary

не смог предоставить исходное решение, поскольку оно было слишком большим, но попытался имитировать проблему.
Проблема:
При наведении курсора мыши над контейнером nav-item-container цвет фона не применяется ко всему контейнеру.
Эффект наведения, кажется, применяется дважды, что выглядит странно.
Когда я нажимаю MudNavLink, эффект наведения действует только применяется к MudNavLink, а не ко всему контейнеру.
Может ли кто-нибудь помочь мне понять, как сделать так, чтобы эффекты наведения и щелчка применялись ко всему контейнеру последовательно? Будем очень признательны за любые указания о том, что может пойти не так.
Спасибо!
[img]https://i.sstatic .net/AJwTuIj8.png[/img]



Подробнее здесь: https://stackoverflow.com/questions/788 ... lick-issue