마우스 오버시 svg fill 변경하기

마우스 오버시 svg fill 변경하기. 이렇게 만들어 놓긴했는데 반응이 느려서..사용 안하기로 함.

function handleHover(button) {
		const svgPath = button.getAttribute("data-svg-path");
		const svgDiv = button.querySelector("div"); 
		const originalHTML = button.innerHTML; // 초기 HTML 내용 저장\

		// 버튼에 마우스 호버 이벤트 리스너 추가
		button.addEventListener("mouseenter", () => {
			// SVG 파일 로드
			fetch(svgPath)
				.then(response => response.text())
				.then(svgData => {
					// SVG 데이터를 div에 HTML로 주입
					svgDiv.innerHTML = svgData;
					// SVG 내의 모든 path 요소의 fill, stroke 속성 변경
					const paths = button.querySelectorAll("path");
					paths.forEach(path => {
						path.setAttribute("fill", "#2FEBFF");
						path.setAttribute("stroke", "#2FEBFF");
					});
				})
				.catch(error => {
					console.error("SVG 파일을 로드하는 중 오류 발생:", error);
				});
			
		});
		// 버튼에서 마우스 호버 이벤트 리스너 제거
		button.addEventListener("mouseleave", () => {
			 // 원래의 HTML 내용으로 되돌림
			button.innerHTML = originalHTML;
			const paths = button.querySelectorAll("path");
			paths.forEach(path => {
			path.setAttribute("fill", "#ffffff");
			path.setAttribute("stroke", "#ffffff");
			});
		});
	}
	const crsrdButton = document.querySelector(".crsrd");
	const unxpButton = document.querySelector(".unxp");
	const cmrButton = document.querySelector(".cmr");
	crsrdButton.addEventListener("mouseover", () => {handleHover(crsrdButton);});
	unxpButton.addEventListener("mouseover", () => {handleHover(unxpButton);});
	cmrButton.addEventListener("mouseover", () => {handleHover(cmrButton);});

 

 <ul class="pu_btn">
                <li class="incr" id="dash">
                    <img src="resources/images/main/menu1.png" alt=">메뉴1">
                    <p>메뉴1</p>
                </li>
                <li class="crsrd activePubtn" id="crsrd" data-svg-path="resources/images/main/32_crsrd_f.svg">
                    <div class="icon icon-crsrd"></div>
                    <p>메뉴2</p>
                </li>
                <li class="unxp" id="unxp" data-svg-path="resources/images/main/32_unxp_f.svg">
                    <div class="icon icon-unxp"></div>
                    <p>메뉴3</p>
                </li>
                <li class="cmr" id="cmr" data-svg-path="resources/images/main/32_cmr_f.svg">
                    <div class="icon icon-cmr"></div>
                    <p>카메라</p>
                </li>
            </ul>