/*JS*/
const handleButtonWithSvgHover = (buttonId, svgWrapperId, svgFillColorNew, svgFillColorOld) => {
const button = $(`#${buttonId}`);
const svgWrapper = $(`#${svgWrapperId}`);
const svgPath = svgWrapper[0].children[0].children[0];
svgPath.style.transition = "0.6s";
button.mouseenter(() => {
svgPath.setAttribute("fill", svgFillColorNew);
})
button.mouseleave(() => {
svgPath.setAttribute("fill", svgFillColorOld);
})
}
handleButtonWithSvgHover("arrow-down-btn", "arrow-down-svg", "white", "black");
/*JS*/
/*HTML markdown example*/
<button id="arrow-down-btn">
<div id="arrow-down-svg">
<svg width="22" height="28" viewBox="..." fill="none">
<path d="..." fill="black"></path>
</svg>
</div>
</buton>
/*HTML markdown example*/