HTML, CSS 및 JavaScript를 사용하여 마우스 오버 시 이미지 소스 URL을 변경하는 방법은 무엇입니까?

마우스를 올리면 이미지 소스 URL 변경

문제:

< 이미지> 사용자가 태그 위로 마우스를 가져가면 태그가 지정됩니다.

시도 및 문제:

CSS의 콘텐츠 속성 및 :hover 선택기를 사용한 초기 접근 방식이 작동하지 않았습니다.

해결책:

변경하는 동안 CSS를 사용하여 src 속성을 직접 생성하는 것은 불가능합니다. HTML, CSS 및 JavaScript를 사용하는 두 가지 대체 방법은 다음과 같습니다.

방법 1: 배경 이미지 사용

1. 바꾸기 <img> 태그를 <div>

2. <div> 태그의 배경 이미지를 설정합니다. CSS를 사용하여 기본 이미지로 변경합니다.
3. :hover 선택기를 사용하여 배경 이미지를 호버 이미지로 업데이트합니다.

<div>

#my-div:hover {
    background: url(hover-image.jpg);
}

방법 2: 사용 JavaScript

1. 마우스를 올리면 src 속성을 변경하는 JavaScript 함수 정의
2. onmouseover 이벤트에 호버 기능을 할당하고 <img> 태그를 지정하세요.

   <img>

   function hoverImage(element) {
       element.src = "hover-image.jpg";
   }
   
   function unhoverImage(element) {
       element.src = "default-image.jpg";
   }

   위 내용은 HTML, CSS 및 JavaScript를 사용하여 마우스 오버 시 이미지 소스 URL을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!