change image when hover-CodePudding

I want to change an SVG image when hover

these are my imports

import sebhag from "./assets/Menu/grey/sebha-g.svg"    
import sebhaw from "./assets/Menu/white/sebha-w.svg"

export const menu = {
    title_sebhag: 'tasbieh',
    image_sebhag: sebhag,
    image_sebhaw: sebhaw,
};

I want to change the sebha-g.svg to sebha-w.svg when hover

<button>
  <a href="#">
    <figure>
       <img src={image_sebhag} alt=" " />
       <figcaption>{title_sebhag}</figcaption>
    </figure>
  </a>
</button>

CodePudding user response：

Without additional context, the easiest way is probably through CSS:

<button>
  <a href="#">
    <figure>
       <img  " />
       <img  src={image_sebhaw} alt=" " />
       <figcaption>{title_sebhag}</figcaption>
    </figure>
  </a>
</button>

figure .figure-img--hover {
  display:none
}

figure:hover .figure-img {
  display: none;
}
figure:hover .figure-img--hover {
  display: unset;
}

Here we simply hide the original image while hovering and instead display the desired image. Though there are many ways to skin this cat...