Почему блок не появляется блок при ховере?

Question

[GIRU]

Почему блок не появляется блок при ховере? вот код

.sidebar-wrapper-hide {
    box-shadow: 1px 1px 59px rgba(0, 0, 0, 0.1);
    background-color: #145a32;
    width: 270px;
    height: 1000px;
    color: #efb542;
    font-family: Izhitsa;
    font-size: 20px;
    position: absolute;
    transition: 0.5s;
    left: 300px;
    z-index: 2;
    top: 0;
    opacity: 0;
    display: flex;
    align-items: center;
}

.nav-link-list:hover .sidebar-wrapper-hide {
    opacity: 1;    
    left: 300px;
}

вот сайт test.avalonsec.ru/.
Вот как должно быть по дизайну

Перепробовал куча вариантов но при наведении на пункт меню с классом .nav-link-list блок с вложенным меню(.sidebar-wrapper-hide) не появляется. Подскажите пожалуйста где я мог допустить ошибку

Comments

[Шохрух Шаймардонов]

Потому что у вас селектор неверный. .nav-link-list:hover .sidebar-wrapper-hide стилизует .sidebar-wrapper-hide когда будет hover у .nav-link-list. НО! это будет если .sidebar-wrapper-hide будет находится ВНУТРИ .nav-link-list. А вам нужен селектор который выбирает соседний элемент (sibling css). Так что проще всего js использовать

Answer 1

[Даниил Сухих]

.nav-link-list:hover .sidebar-wrapper-hide
Данный код говорить что при наведении на .nav-link-list вы хотите показать элемент .sidebar-wrapper-hide который находиться внутри .nav-link-list, но он не внутри него.