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

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

문제:

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

시도 및 문제:

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

해결책:

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

방법 1: 배경 이미지 사용

1. 바꾸기 <img alt="HTML, CSS 및 JavaScript를 사용하여 마우스 오버 시 이미지 소스 URL을 변경하는 방법은 무엇입니까?" > 태그를
2. 태그의 배경 이미지를 설정합니다. CSS를 사용하여 기본 이미지로 변경합니다.
3. :hover 선택기를 사용하여 배경 이미지를 호버 이미지로 업데이트합니다.

<div>
<pre class="brush:php;toolbar:false">#my-div:hover {
    background: url(hover-image.jpg);
}

방법 2: 사용 JavaScript

1. 마우스를 올리면 src 속성을 변경하는 JavaScript 함수 정의
2. onmouseover 이벤트에 호버 기능을 할당하고 <img alt="HTML, CSS 및 JavaScript를 사용하여 마우스 오버 시 이미지 소스 URL을 변경하는 방법은 무엇입니까?" > 태그를 지정하세요.

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

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

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