:hover на li в котором содержится svg и параграф

Question

:hover на li в котором содержится svg и параграф

Рейтинг: 0Ответов: 2Опубликовано: 03.02.2023

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

Ситуация такая: Есть ненумерованный список, в нём, в каждом из пунктов лежит и ссылка . Проблема: Когда я вешаю 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");
  }

}

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

css html scss hover

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

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

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

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

    span {
      // необходимые стили
    }
  }
}

Answer 2

▲ 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>

:hover на li в котором содержится svg и параграф

Ответы