Блог

Главная - Вопросы по программированию - Как изменить несколько элементов при наведении курсора мыши?

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

#html #css #flexbox #styling

#HTML #css #flexbox #оформление

Вопрос:

При наведении курсора мыши на элемент 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;
  amp;__item {
    padding: 1.4rem 3rem;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    amp;:hover {
      border-color: $color-blue;
      span {
        color: $color-blue;
      }
    }
  }
  amp;__link {
    border-bottom: 3px solid transparent;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  amp;__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. изменить значение значка svg??

2. Я хочу увидеть исходный SVG код, из которого вы создали символ.

3. Если можно, почему бы не добавить правило для svg inside amp;:hover ?

4. @kukkuz спасибо, приятель, да, я понял 🙂

Ответ №1:

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

 .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;
  amp;__item {
    padding: 1.4rem 3rem;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    amp;:hover {
      border-color: $color-blue;
      span {
        color: $color-blue;
      }
      svg {
        border-bottom: 3px solid $color-blue;
      }
    }
  }
  amp;__link {
    border-bottom: 3px solid transparent;
    text-transform: uppercase;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  amp;__icon {
    width: 1.8rem;
    height: 1.8rem;
    margin-bottom: .3rem;
  }
}

Комментарии:

1. @AlemKahrovic Рад помочь, пожалуйста, поддержите и отметьте мой ответ, если он полезен.