원본을 교체하는 대신 내 호버 이미지가 겹치는 이유는 무엇입니까?

CSS/HTML 호버로 이미지 표시 수정

마우스를 호버했을 때 이미지를 다른 이미지로 바꾸려고 할 때 원본 이미지가 계속 표시되거나 새 이미지가 크기를 조정하지 못해 이미지가 겹쳐지게 됩니다. 다음은 문제와 가능한 해결 방법입니다.

제공된 코드는 문제를 나타냅니다.

<img src="LibraryTransparent.png">

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

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

이 코드에서 마우스 오버 시 배경 이미지를 설정하면 두 번째 이미지가 첫 번째 이미지 위에 나타나지만 크기가 제대로 조정되거나 위치가 조정되지 않을 수 있습니다.

대체 해결 방법: JavaScript

또 다른 옵션은 JavaScript를 활용하여 이미지 변경을 처리하는 것입니다.

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

이 접근 방식에서 onmouseover 이벤트는 마우스를 위에 올리면 이미지 소스를 대안으로 변경합니다. , onmouseout 이벤트는 마우스가 떠날 때 소스를 원본 이미지로 되돌립니다. JS를 사용하면 이미지 조작을 보다 직접적으로 제어할 수 있어 이미지 간의 원활한 전환이 보장됩니다.

위 내용은 원본을 교체하는 대신 내 호버 이미지가 겹치는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!