主页 / 问题 / 1510878
Accepted
Pavel
Asked:2023-04-05 17:24:24 +0000 UTC2023-04-05 17:24:24 +0000 UTC

如何使 svg 图像在悬停时改变颜色？

  • 772

我不知道如何在将鼠标悬停在图标上时更改图标的背景。我通过悬停来完成 - 它对我不起作用。我将不胜感激任何帮助。

.img{}
.img:hover{
fill:blue;
}
<div class="container__images">
  <div class="container__image">
    <img class="img" src="https://static.tildacdn.com/tild3835-3864-4631-a336-323562643836/01.svg">
    <span class="content__text_small">Яндекс</span>
  </div>
  <div class="container__image">
    <img class="img" src="https://static.tildacdn.com/tild3030-6430-4466-a230-376632616439/02.svg">
    <span class="content__text_small">Гугл</span>
  </div>
  <a href="">
    <div class="container__image">
      <img  class="img" src="https://static.tildacdn.com/tild6639-6365-4261-b236-393131633765/07.svg">
      <span class="content__text_small">Отзовик</span>
    </div>
  </a>
</div>

html

2 个回答

  1. Best Answer

    正如@Simon已经写的那样，该元素img没有fill. 该属性仅在您的代码包含 SVG 图像本身而不是链接时才有效。

    这是它的工作原理（我使用第一张图片的示例完成了它 - 然后你自己做）：

    .container__image:hover img,
.container__image:hover svg path:not(:last-of-type) {
  fill: blue;
}
    <div class="container__images">
  <div class="container__image">
    <svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" fill="none"> <path fill-rule="evenodd" clip-rule="evenodd" d="M33.524 22.142l9.574-4.362c0 7.637-5.276 15.529-9.956 23.047l-8.023 11.91 3.51-21.746 4.896-8.849z" fill="#E00000"/> <path d="M26.955 33.48c8.947 0 16.2-7.254 16.2-16.2 0-8.947-7.253-16.2-16.2-16.2s-16.2 7.253-16.2 16.2c0 8.946 7.253 16.2 16.2 16.2z" fill="#F33"/> 
        <path d="M26.955 23.734a6.454 6.454 0 100-12.909 6.454 6.454 0 000 12.91z" fill="#fff"/> 
        </svg>
    <span class="content__text_small">Яндекс</span>
  </div>
  <div class="container__image">
    <img class="img" src="https://static.tildacdn.com/tild3030-6430-4466-a230-376632616439/02.svg">
    <span class="content__text_small">Гугл</span>
  </div>
  <a href="">
    <div class="container__image">
      <img class="img" src="https://static.tildacdn.com/tild6639-6365-4261-b236-393131633765/07.svg">
      <span class="content__text_small">Отзовик</span>
    </div>
  </a>
</div>

    • 1

  2. 我找到了一种方法，但它只适用于彩色图片。我会告诉你我的代码。您需要应用过滤器并已按度数设置颜色。

      .profile_social_link>img:hover {
  filter: hue-rotate(135deg);
    <a target="_blank" class="profile_social_link" href="#">
  <img src="img/profile/vk_blue.svg" alt="vk">
</a>

    • 1

相关问题