HTML, CSS 및 JavaScript를 사용하여 마우스 오버 시 이미지 소스를 어떻게 변경할 수 있습니까?-CSS 튜토리얼-php.cn

HTML, CSS 및 JavaScript를 사용하여 마우스 오버 시 이미지 소스를 어떻게 변경할 수 있습니까?

Patricia Arquette

풀어 주다： 2024-12-23 00:24:10

원래의

637명이 탐색했습니다.

How Can I Change an Image Source on Hover Using HTML, CSS, and JavaScript?

HTML, CSS 및 JavaScript를 사용하여 마우스 오버 시 이미지 소스 수정

<img> 태그를 마우스로 가리키면 다양한 접근 방식을 취할 수 있습니다.

CSS 전용(Webkit 전용)

CSS만 사용하면 태그에서 이미지를 다른 URL로 바꿀 수 있습니다. 호버. 그러나 Google Chrome과 같은 Webkit 기반 브라우저에서만 작동합니다.

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

로그인 후 복사

Div 배경 이미지 사용

또는

마우스를 올리면 배경 이미지가 교체되는 요소:

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

로그인 후 복사

JavaScript 사용

JavaScript를 사용하면 <img> 마우스오버 및 마우스아웃에 태그 지정:

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

로그인 후 복사

<img>

로그인 후 복사

위 내용은 HTML, CSS 및 JavaScript를 사용하여 마우스 오버 시 이미지 소스를 어떻게 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!