БЛОГ НА HUSL


Как мне поменять цвет svg картинки при наведении?

Автор вопроса: syrex

У меня есть 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 шт):

Автор решения: Vladimir Gonchar

В таком виде Вы не можете менять содержимое иконки. Она должна быть вставлена через тег <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>
→ Ссылка
Автор решения: Denis A

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

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

licensed under cc by-sa 3.0 with attribution.