CSS 또는 JavaScript를 사용하여 호버에서 이미지를 원활하게 바꾸는 방법은 무엇입니까?

CSS/HTML을 사용하여 마우스 오버 시 이미지를 동적으로 교체하는 방법

마우스를 위에 올리면 이미지가 동적으로 변경되도록 설정할 때 다음 사항이 중요합니다. 원하는 효과를 얻을 수 있도록 특정 뉘앙스를 해결하십시오. 한 가지 일반적인 문제는 원본 이미지가 유지되어 새 이미지와 겹칠 때 발생하며 높이와 너비가 그에 따라 조정되지 않을 수 있습니다.

코드 스니펫:

이 예제 HTML을 고려해보세요. /CSS 코드:

<img src="LibraryTransparent.png">

#Library {
    height: 70px;
    width: 120px;
}

#Library:hover {
    background-image: url('LibraryHoverTrans.png');
    height: 70px;
    width: 120px;
}

:hover 상태에서 배경 이미지를 사용하는 것은 이미지를 동적으로 변경하는 한 가지 접근 방식입니다. 그러나 JavaScript를 사용하여 추가 솔루션을 사용할 수 있습니다.

JavaScript 옵션:

<img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" />

이 시나리오에서는 JavaScript를 사용하여 마우스를 사용할 때 이미지 소스를 교체합니다. 마우스를 가져가면 마우스를 놓으면 복원됩니다. 이 방법을 사용하면 원본 이미지가 사라지고 새 이미지가 원활하게 교체되므로 중복이나 크기 문제가 방지됩니다.

위 내용은 CSS 또는 JavaScript를 사용하여 호버에서 이미지를 원활하게 바꾸는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!