Необходимо изменить цвет при наведении на ссылку.
Проблема в том, что выделяется либо текст и иконка не выделена, либо текст с иконкой, когда курсор на иконке. А надо одновременно оба объекта при наведении в зоне ссылки.
Возможно ли это сделать для 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);
}
