1

У меня есть svg иконки социальный сетей - вк, телеграм, инста. Также, у меня есть их более прозрачные, такие же картинки социальных сетей. Как мне сделать так, чтобы при наведении на картинку соц. сети она либо меняла цвет, либо меняла свою иконку на такую же, но более прозрачную? Это надо делать через :hover или как-то по другому?

.top {
    position: relative;
    max-width: 100%;
    height: 790px;
    background: #F4F4F4;

    .header {
        position: absolute;
        max-width: 1180px;
        height: 80px;
        top: 20px;
        left: 370px;
        background: #E73D66;
        border-radius: 90px;
        display: flex;
        list-style-type: none;
    }

    .logo {
        padding-top: 18px;
        padding-bottom: 18px;
        padding-left: 40px;
    }

    .logo-2 {
        padding-top: 23px;
        padding-bottom: 24px;
        padding-left: 15px;
    }

    .pages {
        padding-left: 40px;
        padding-top: 30px;
        padding-bottom: 30px;
        height: 20px;
        font-family: 'rubik';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        text-transform: uppercase;
        color: #FFFFFF;

    }

    .pages:nth-child(3) {
        padding-left: 141px;
    }

    .media {
        padding-left: 30px;
        padding-top: 28px;

    }

    .media:nth-child(7) {
        padding-left: 174px;
    }

    .media:last-child {
        padding-right: 40px;
    }

    .media-img__inst {
        cursor: pointer;
    }

    .media-img__vk {
        cursor: pointer;
    }

    .media-img__telegr {
        cursor: pointer;
    }


}
<div class="top">
        <ul class="header">
            <li><img class="logo" src="img/logo-dogs.svg" alt="logo"></li>
            <li><img class="logo-2" src="img/logo4.svg" alt="logo-2"></li>
            <li class="pages">О приюте</li>
            <li class="pages">Питомцы</li>
            <li class="pages">Полезные советы</li>
            <li class="pages">Контакты</li>
            <li class="media"><img class="media-img__inst" src="img/Instagram.svg" alt="instagram"></li>
            <li class="media"><img class="media-img__vk" src="img/vk.svg" alt="vk"></li>
            <li class="media"><img class="media-img__telegr" src="img/telegram.svg" alt="telegram"></li>
        </ul>
        <img class="bg-dogs" src="img/bg-dogs.png" alt="">
        <h3 class="top-promo">ПРИЮТ ДЛЯ СОБАК <span style="color: #E73D66;">ЧЕТЫРЕ ЛАПЫ</span></h3>
        <h1 class="top-promo__big">ВОЗЬМИ ДРУГА <span style="color: #E73D66;">ДОМОЙ</span></h1>

    </div>

введите сюда описание изображения

2 ответа 2

2

В таком виде Вы не можете менять содержимое иконки. Она должна быть вставлена через тег <svg> (можно с <use> и вытянуть из спрайта). Тогда можно было бы управлять цветом иконки через fill (или color при установленном fill: currentColor;).

Но в Вашем случае в этом нет необходимости. Так как Вам нужна только прозрачность при наведении, то можно обойтись простым изменением свойств самого блока:

.wrapper {
  width: 100%;
  height: 50px;
  background: #e73d66;
}

.wrapper ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.item {
  transition: 0.2s ease;
  padding: 0 6px;
}

.item:hover {
  opacity: 0.5;
}
<div class="wrapper">
  <ul>
    <li class="item">
      <img src="https://www.svgrepo.com/show/422477/famous-favorite-featured.svg" alt="" />
    </li>
    <li class="item">
      <img src="https://www.svgrepo.com/show/422477/famous-favorite-featured.svg" alt="" />
    </li>
    <li class="item">
      <img src="https://www.svgrepo.com/show/422477/famous-favorite-featured.svg" alt="" />
    </li>
  </ul>
</div>


UPD SVG - это просто разметка с правилами, как отобразить векторы. То есть можно вставлять содержимое в HTML, и это будет выведено (просто зайти в файл с картинкой в svg, и CTRL+C - CTRL+V). При этом внутри этого кода не должно быть определений fill и/или stroke, если нужно управление из CSS. Если всё же хочется таким вариантом вставить и управлять поведением:

.wrapper {
  width: 100%;
  height: 50px;
}

.bg-pink {
  background: #e73d66;
}

.bg-orange {
  background: #ff5e00;
}

.global-color {
  color: #fff;
}

.wrapper ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.item svg {
  transition: 0.2s ease;
  padding: 0 6px;
  fill: currentColor;
}

.item svg:hover {
  color: #ff95c6;
}

.item2 svg {
  transition: 0.2s ease;
  padding: 0 6px;
  fill: #fff;
}

.item2 svg:hover {
  fill: rgba(255, 255, 255, 0.5);
}
<div class="wrapper bg-pink global-color">
  <ul>
    <li>Color:</li>
    <li class="item">
      <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 1c-6.338 0-12 4.226-12 10.007 0 2.05.738 4.063 2.047 5.625.055 1.83-1.023 4.456-1.993 6.368 2.602-.47 6.301-1.508 7.978-2.536 9.236 2.247 15.968-3.405 15.968-9.457 0-5.812-5.701-10.007-12-10.007zm0 15c-.565 0-1.024-.459-1.024-1.025 0-.565.459-1.024 1.024-1.024.566 0 1.024.459 1.024 1.024 0 .566-.458 1.025-1.024 1.025zm1.606-4.858c-.74.799-.775 1.241-.766 1.785h-1.643c-.006-1.208.016-1.742 1.173-2.842.469-.446.84-.799.788-1.493-.047-.66-.599-1.004-1.117-1.004-.581 0-1.261.432-1.261 1.649h-1.646c0-1.966 1.155-3.237 2.941-3.237.849 0 1.592.278 2.09.783.468.473.709 1.125.7 1.883-.013 1.134-.704 1.878-1.259 2.476z"/></svg>
    </li>
    <li class="item">
      <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.326 18.266l-4.326-2.314-4.326 2.313.863-4.829-3.537-3.399 4.86-.671 2.14-4.415 2.14 4.415 4.86.671-3.537 3.4.863 4.829z"/></svg>
    </li>
  </ul>
</div>

<div class="wrapper bg-orange">
  <ul>
    <li>Fill:</li>
    <li class="item2">
      <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 1c-6.338 0-12 4.226-12 10.007 0 2.05.738 4.063 2.047 5.625.055 1.83-1.023 4.456-1.993 6.368 2.602-.47 6.301-1.508 7.978-2.536 9.236 2.247 15.968-3.405 15.968-9.457 0-5.812-5.701-10.007-12-10.007zm0 15c-.565 0-1.024-.459-1.024-1.025 0-.565.459-1.024 1.024-1.024.566 0 1.024.459 1.024 1.024 0 .566-.458 1.025-1.024 1.025zm1.606-4.858c-.74.799-.775 1.241-.766 1.785h-1.643c-.006-1.208.016-1.742 1.173-2.842.469-.446.84-.799.788-1.493-.047-.66-.599-1.004-1.117-1.004-.581 0-1.261.432-1.261 1.649h-1.646c0-1.966 1.155-3.237 2.941-3.237.849 0 1.592.278 2.09.783.468.473.709 1.125.7 1.883-.013 1.134-.704 1.878-1.259 2.476z"/></svg>
    </li>
    <li class="item2">
      <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.326 18.266l-4.326-2.314-4.326 2.313.863-4.829-3.537-3.399 4.86-.671 2.14-4.415 2.14 4.415 4.86.671-3.537 3.4.863 4.829z"/></svg>
    </li>
  </ul>
</div>

Для того, чтобы не тянуть много SVG кода, существуют спрайты. По сути это набор картинок, оформленный в виде символов (<symbol>). Их чаще генерируют, можно это делать через Gulp/Webpack или всякими онлайн-генераторами (например, этим). Создаётся файл, кладется куда-то (обязательно в то же место, где сам сайт находится, из дургого домена загружать спрайты нельзя).

Вот так может выглядеть HTML-код со спрайтом:

<div class="wrapper">
  <ul>
    <li class="item">
      <svg class="icon">
        <use xlink:href="demo_sprite.svg#login"></use>
      </svg>
    </li>
    <li class="item">
      <svg class="icon">
        <use xlink:href="demo_sprite.svg#warning"></use>
      </svg>
    </li>
  </ul>
</div>
2
  • А если мне надо поменять цвет иконки, а она в svg? Можете показать на примере, пожалуйста? Я не могу понять, как мне вставить иконку в тег svg. Ссылкой? А где эту ссылку взять, если иконка хранится у меня на компьютере?
    – syrex
    Commented 26 июн. 2022 в 8:05
  • @syrex Дополнил ответ Commented 26 июн. 2022 в 9:44
0

Да, нужно через :hover. так проще всего Пример:

a:hover {
  background: url("http://wpguru.co.uk/wp-content/uploads/2013/09/CSS-Logo-214x300.png") no-repeat 50% 50%;

Ваш ответ

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

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