HTML, CSS 및 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css chrome html webkit using background

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.