html - CSS如何在悬停在链接上时更改SVG

Question

我有以下内容:

如您所见，当用户将鼠标悬停在图像上时，有一些 css 需要更改图像。

.dashboard-card-content:hover .right-arrow a {
  background-color: #29b1e9;
}

.dashboard-card-content:hover .right-arrow a svg path {
  stroke: #fff;
}

<div class="white-container dashboard-card-content">
  <div class="gLoader-img">
    <img src="assets/images/comp-switch-logo2.png" alt="">
  </div>
  <div class="gloaderSvg-wrapper"></div>
  <div class="dashboard-card-header-content">
    <h5>Policy Maintainance</h5>
  </div>
  <div class="dashboard-card-footer-content">
    <div class="right-arrow">
      <a href="#">
        <img src="assets/images/right-icon.svg" class="svg" alt="">
      </a>
    </div>
  </div>
</div>

正常状态如愿。

悬停状态不符合要求。它根据需要使按钮背景变为浅蓝色，但不会使箭头变为白色。

这是悬停时所需的外观。

问题

如何更改上面的 htlm/scss 以允许当用户将鼠标悬停在图像上时图像变为白色？

Answer 1

我认为没有办法用 color 做到这一点，你可以使用下面这样的方法

.icon {
  display: inline-block;
  width: 70px;
  height: 70px;
  background-size: cover;
}
.icon-arrow {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-arrow-black.svg);
}
.icon-arrow:hover,
.icon-arrow:focus {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

<div>
  
  <span class="icon icon-arrow"></span>
 
</div>