Как поменять несколько элементов при наведении? - PullRequest
Новая
       23

Как поменять несколько элементов при наведении?

1 голос
/ 19 марта 2019

При наведении курсора на элемент li я хочу изменить нижнюю границу, значок svg и ссылку одного цвета при наведении.

Нижняя граница и ссылка изменяются при наведении курсораповерх элемента li, но единственное, что не работает, это значок svg.Может быть, моя структура HTML неверна?

.sub-nav {
  background-color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
  position: relative;
  z-index: 10;
  margin-bottom: 1.2rem;
  margin-top: -3.8rem;
  list-style: none;
  box-shadow: $shadow-light;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &__item {
    padding: 1.4rem 3rem;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    &:hover {
      border-color: $color-blue;
      span {
        color: $color-blue;
      }
    }
  }
  &__link {
    border-bottom: 3px solid transparent;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &__icon {
    width: 1.8rem;
    height: 1.8rem;
    margin-bottom: .3rem;
  }
}
<div class="main">
  <ul class="sub-nav">
    <li class="sub-nav__item">
      <a href="#" class="sub-nav__link">
        <svg class="sub-nav__icon">
                                <use xlink:href="img/sprite.svg#icon-sphere"></use>
                            </svg>
        <span>timeline</span>
      </a>
    </li>
  </ul>
</div>

1 Ответ

0 голосов
/ 19 марта 2019

Вы можете попробовать сделать это. 

.sub-nav {
  background-color: #fff;
  font-size: 1.4rem;
  font-weight: 400;
  position: relative;
  z-index: 10;
  margin-bottom: 1.2rem;
  margin-top: -3.8rem;
  list-style: none;
  box-shadow: $shadow-light;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &__item {
    padding: 1.4rem 3rem;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    &:hover {
      border-color: $color-blue;
      span {
        color: $color-blue;
      }
      svg {
        border-bottom: 3px solid $color-blue;
      }
    }
  }
  &__link {
    border-bottom: 3px solid transparent;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &__icon {
    width: 1.8rem;
    height: 1.8rem;
    margin-bottom: .3rem;
  }
}
...