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

Question

TtT RrR @UNN4MED

Битрикс разработчик

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

Необходимо изменить цвет при наведении на ссылку.
Проблема в том, что выделяется либо текст и иконка не выделена, либо текст с иконкой, когда курсор на иконке. А надо одновременно оба объекта при наведении в зоне ссылки.
Возможно ли это сделать для svg, добавленный через тег img? Или лучше вставить код файла svg?

<section>
        <ul>
            <li><a href="#">
                <img src="images/plane-solid.svg" alt="plane-solid.svg">
                    авиабилеты
                </a></li>
            <li><a href="#">
                <img src="images/plane-departure-solid.svg" alt="plane-departure-solid.svg">
                    чартеры
                </a></li>
            <li><a href="#">
                <img src="images/train-solid.svg" alt="train-solid">
                    ж/д билеты
                </a></li>
            <li><a href="#">
                <img src="images/hotel-solid.svg" alt="hotel-solid">
                    гостиницы
                </a></li>
            <li><a href="#">
                <img src="images/thumbs-up-solid.svg" alt="thumbs-up-solid">
                    туризм
                </a></li>
        </ul>
    </section>

*,::before,::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul{
    display: flex;
    list-style: none;
    justify-content: center;
    min-height: 40px;
    align-items: center;
}
a{
    display: flex;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    color: gray;
    text-align: center;
}
img{
    fill: gray;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
a:hover,img:hover{
    color: rgb(17, 97, 218);
    fill: rgb(17, 97, 218);
}

Вопрос задан более двух лет назад
845 просмотров

1 комментарий

Подписаться 1 Простой 1 комментарий

Решения вопроса 1

4 комментария

TtT RrR @UNN4MED Автор вопроса

Как бы интересное свойство mask, но результата, которого я хотел, это не принесло. Текст и svg в ссылке по-прежнему выделяются отдельно

<style>
ul{
    display: flex;
    list-style: none;
    justify-content: center;
    min-height: 40px;
    align-items: center;
}
a{
    display: flex;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    color: gray;
    text-align: center;
}
.icon{
    background-color: gray;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}
.icon-1 {
    mask: url(images/plane-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/plane-solid.svg) no-repeat 50% 50%;
}
.icon-2 {
    mask: url(images/plane-departure-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/plane-departure-solid.svg) no-repeat 50% 50%;
}
.icon-3 {
    mask: url(images/train-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/train-solid.svg) no-repeat 50% 50%;
}
.icon-4 {
    mask: url(images/hotel-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/hotel-solid.svg) no-repeat 50% 50%;
}
.icon-5 {
    mask: url(images/thumbs-up-solid.svg) no-repeat 50% 50%;
    -webkit-mask: url(images/thumbs-up-solid.svg) no-repeat 50% 50%;
}
a:hover{
    color: rgb(17, 97, 218);
}
.icon:hover{
    background-color: rgb(17, 97, 218);
}
</style>
<body>
<section>
        <ul>
            <li><a href="#">
                <span class="icon icon-1"></span>
                    авиабилеты
                </a></li>
            <li><a href="#">
                <span class="icon icon-2"></span>
                    чартеры
                </a></li>
            <li><a href="#">
                <span class="icon icon-3"></span>
                    ж/д билеты
                </a></li>
            <li><a href="#">
                <span class="icon icon-4"></span>
                    гостиницы
                </a></li>
            <li><a href="#">
                <span class="icon icon-5"></span>
                    туризм
                </a></li>
        </ul>
    </section>
</body>

Написано более двух лет назад

Ankhena @Ankhena Куратор тега CSS

TtT RrR,
1. span нужно удалить и заменить на пседоэлемент.
Если вам хочется сделать пустой тег в разметке, с вероятностью 99%, вы делаете что-то не то.
2. И потом менять background-color этого псевдоэлемента при наведении на ссылку.
3. Свойства с префиксами пишутся всегда до основного свойства, а не после.

Написано более двух лет назад

TtT RrR @UNN4MED Автор вопроса

Ankhena, что ж, сработало. Спасибо!

<style>
a{
    display: flex;
    text-decoration: none;
    flex-direction: column;
    align-items: center;
    padding: 10px 15px;
    color: gray;
    text-align: center;
}
a.icon:before{
    content: "";
    background-color: gray;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.icon-1:before {
    -webkit-mask-image: url(images/plane-solid.svg);
    mask-image: url(images/plane-solid.svg);
}
.icon-2:before {
    -webkit-mask-image: url(images/plane-departure-solid.svg);
    mask-image: url(images/plane-departure-solid.svg);
}
.icon-3:before {
    -webkit-mask-image: url(images/train-solid.svg);
    mask-image: url(images/train-solid.svg);
}
.icon-4:before {
    -webkit-mask-image: url(images/hotel-solid.svg);
    mask-image: url(images/hotel-solid.svg);
}
.icon-5:before {
    -webkit-mask-image: url(images/thumbs-up-solid.svg);
    mask-image: url(images/thumbs-up-solid.svg);
}
a:hover{
    color: rgb(17, 97, 218);
}
.icon:hover::before{
    background-color: rgb(17, 97, 218);
}
</style>
<body>
<section>
        <ul>
            <li>
                <a class="icon icon-1" href="#">авиабилеты</a>
            </li>
            <li>
                <a class="icon icon-2" href="#">чартеры</a>
            </li>
            <li>
                <a class="icon icon-3" href="#">ж/д билеты</a>
            </li>
            <li>
                <a class="icon icon-4" href="#">гостиницы</a>
            </li>
            <li>
                <a class="icon icon-5" href="#">туризм</a>
            </li>
        </ul>
    </section>
</body>

Написано более двух лет назад

Ankhena @Ankhena Куратор тега CSS
TtT RrR, супер!

Еще можно писать

.icon:hover::before{ background-color: inherit; }

чтобы не менять цвет несколько раз.
Или использовать кастомные свойства

a { --color: red; color: var(--color); } a::before { background-color: inherit; } a:hover { --color: blue; }
Написано более двух лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 19 часов назад
- 119 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 94 просмотра
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 88 просмотров
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 72 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 72 просмотра
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 97 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 81 просмотр
2

ответа
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Сверстать веб приложение на vue

24 нояб. 2024, в 19:46

1000 руб./в час

Стили/дизайн/верстка приложения на QT

24 нояб. 2024, в 19:43

30000 руб./за проект

SEO оптимизация мультиязычного сайта и вывод в топы

24 нояб. 2024, в 19:42

200000 руб./за проект

Answer 1 · 2022-04-02 20:52:05

Это не контентные изображения.
Это украшения ссылок, их делают фонами и/или псевдоэлементами.
Поменять цвет удобно с помощью mask https://codepen.io/noahblon/post/coloring-svgs-in-...

Возможно ли это сделать для svg, добавленный через тег img?

Можно с помощью фильтров. Метод описан в статье по ссылке выше. Мало удобен.

Или лучше вставить код файла svg?

Лучше убрать картинки в css и использовать как mask.
Можно заинлайнить в CSS с помощью https://yoksel.github.io/url-encoder/

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт