@inzoddex

Как показать один элемент при наведении курсора на другой в SASS?

Имеется такая структура
<div class="dropdown">
    <button class="dropdown__button">
        <i class="fas fa-bars"></i>
        <span>Категории</span>
    </button>
     <div class="dropdown__content">
           <a href="#" class="dropdown__link">Межкомнатные двери</a>
            <a href="#" class="dropdown__link">Входные двери</a>
            <a href="#" class="dropdown__link">Фурнитура</a>
            <a href="#" class="dropdown__link">Лестницы</a>
            <a href="#" class="dropdown__link">Мебель</a>
            <a href="#" class="dropdown__link">Арки</a>
            <a href="#" class="dropdown__link">Услуги</a>
      </div>
 </div>


И ее стилизация в SASS
.dropdown 
    width: 235px
    &__button
        width: 100%
        text-align-last: left
        padding: 14px 0px 14px 27px
        box-sizing: border-box
        cursor: pointer
        font-size: 18px
        text-transform: uppercase
        color: #ffffff
        background-color: $color-primary
        border: none
        span
            padding-left: 5px

    &__content
        display: none
                
    &__link
        padding: 20px 0px 20px 27px
        border-bottom: 1px solid rgba(209, 209, 209, .5)
        color: $color-adding


Как сделать так, чтобы при наведении на кнопку КАТЕГОРИИ отображались вложенные элементы?
  • Вопрос задан
  • 54 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
.dropdown
    &__button:hover + &__content,
    &__content:hover
        display: block
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Укажите, что при наведении на кнопку &__button:hover следующий за ней элемент, расположенный на том же уровне + &__content, нужно отображать display: block

&__button:hover + &__content
        display: block


Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы