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