0

помогите разобраться, я совсем зелёный, прошу словами не кидаться :)

Ситуация такая: Есть ненумерованный список, в нём, в каждом из пунктов лежит и ссылка . Проблема: Когда я вешаю hover на li , ничего не работает, когда вешаю hover на ссылку или на span изменяется либо ссылка либо span. Мне же нужно, что бы при наведении на пункт li изменялся и span и ссылка. Подскажите, как заставить их одновременно изменяться? И ещё один нюанс, в спане у меня находится svg иконка, точнее её класс который импортируется из файла scss.

<nav class="sidebar-links">
  <ul>
    <li class="sidebar-links__link">
      <span class="v-icon-home"></span>
      <p>Главная</p>
    </li>
    <li class="sidebar-links__link">
      <span class="v-icon-about"></span>
      <p>Обо мне</p>
    </li>
    <li class="sidebar-links__link">
      <span class="v-icon-services"></span>
      <p>Услуги</p>
    </li>
    <li class="sidebar-links__link">
      <span class="v-icon-portfolio"></span>
      <p>Портфолио</p>
    </li>
    <li class="sidebar-links__link">
      <span class="v-icon-blogs"></span>
      <p>Блог</p>
    </li>
    <li class="sidebar-links__link">
      <span class="v-icon-contacts"></span>
      <p>Написать мне</p>
    </li>
  </ul>
</nav>
li {
  &:hover {
    color: #5AB159;
  }
}

На всякий случай приложу откуда импортируется svg

%icon-standard {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  background-color: rgba(255, 255, 255, 0.8);
  transition: all .3s ease-in-out;

  &:hover {
    background-color: #5AB159;
  }
}

.v-icon {
  &-about {
    @extend %icon-standard;
    mask-image: url("../resources/img/nav-icons/about.svg");
    -webkit-mask-image: url("../resources/img/nav-icons/about.svg");
  }

  &-blogs {
    @extend %icon-standard;
    mask-image: url("../resources/img/nav-icons/blogs.svg");
    -webkit-mask-image: url("../resources/img/nav-icons/blogs.svg");
  }

  &-contacts {
    @extend %icon-standard;
    mask-image: url("../resources/img/nav-icons/contacts.svg");
    -webkit-mask-image: url("../resources/img/nav-icons/contacts.svg");
  }

  &-home {
    @extend %icon-standard;
    mask-image: url("../resources/img/nav-icons/home.svg");
    -webkit-mask-image: url("../resources/img/nav-icons/home.svg");
  }

  &-portfolio {
    @extend %icon-standard;
    mask-image: url("../resources/img/nav-icons/portfolio.svg");
    -webkit-mask-image: url("../resources/img/nav-icons/portfolio.svg");
  }

  &-services {
    @extend %icon-standard;
    mask-image: url("../resources/img/nav-icons/services.svg");
    -webkit-mask-image: url("../resources/img/nav-icons/services.svg");
  }

}

Заранее благодарю за уделённое время! Вопрос глупенький, но моих мозгов уже не хватает :)

4
  • Не нужно издеваться над пользователем. Делай так, чтобы :hover стоял на ссылке.
    – Qwertiy
    3 фев в 21:37
  • Хм, а вот об этом я что то не подумал( Попробую накинуть на сслку :) 4 фев в 6:56
  • Попробовал, не работает)) 4 фев в 6:57
  • Ну так если не работает, то надо другие стили поменять, чтобы заработало. Кликабельная область ссылки должна совпадать с областью подсветки при наведении.
    – Qwertiy
    4 фев в 15:30

2 ответа 2

1

При добавлении ховера для тега li дочерний элемент (тег p) не наследует цвет от родителя, потому что вероятнее всего дочерний элемент уже имеет свойство color, которое является более приоритетным. Чтобы избежать этого, дочернему элементу необходимо явно задать цвет.

Для добавления стилей при ховере двум дочерним элементам вам поможет следующий селектор:

li {
  &:hover {
    p {
      color: #5AB159;
    }

    span {
      // необходимые стили
    }
  }
}
1
  • Вот! Спасибо, я был уверен что hover можно вешать только на один элемент, то есть, был уверен что в hover пишутся только стили , а не селекторы. Спасибо, теперь запомню навсегда :) 4 фев в 6:48
1

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

li span {
  color: blue;
  margin-bottom: 50px;
  display: block;
}
li a {
  color: blue;
}
li:hover span {
  color: red;
}
li:hover a {
  color: red;
}
li {
  display: inline-block;
  border: 1px solid black;
  padding: 15px;
}

li span:hover {
  text-transform: uppercase;
}
li a:hover {
  text-transform: uppercase;
}
<ul>
  <li class="sidebar-links__link">
    <span class="v-icon-home">Типо SVG картинка</span><br>
    <a href="#">Главная</a>
  </li>
</ul>

1
  • Спасибо за подробный разбор! Я вообще не в ту сторону думал. 4 фев в 6:49

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.