CSS how to change a SVG on hover over link

Question

I have the following:

As you can see, there is some css that needs to change the image when a user hovers over it.

.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>

The normal state is as desired.

The on hover state is not as desired. It is making the buttons background light blue as desired, but it does not make the arrow white.

This is the desired look on hover.

Question

How do I change the above htlm/scss to allow the image to turn white when a user hovers over it?

Answer 1

i think there is no way to do that with color and you can use ways like this below

.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>