CSS 또는 JavaScript를 사용하여 마우스 오버 시 이미지를 변경할 때 이미지 겹침을 어떻게 방지할 수 있습니까?

HTML, CSS 및 JavaScript를 사용하여 마우스 오버 시 이미지 모양 사용자 정의>

마우스 오버 시 이미지 전환을 처리할 때 다음과 같은 문제가 발생할 수 있습니다. 기본 이미지는 계속 표시되고 업데이트된 이미지는 원하는 높이와 너비로 조정되지 않아 겹칩니다.

코드 조각에서:

<img src="LibraryTransparent.png">

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

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

배경 이미지를 변경하려는 시도가 정확합니다. 그러나 높이 및 너비 문제를 해결하려면 :hover 선택기 내에서 다음 CSS 속성을 사용할 수 있습니다.

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

배경 크기: 커버 속성을 사용하면 업데이트된 이미지가 화면의 전체 공간을 채우도록 할 수 있습니다. 요소가 겹치는 것을 방지합니다.

또는 JavaScript를 사용하여 이미지 전환을 처리할 수도 있습니다. 이 접근 방식을 사용하면 이미지의 src 속성을 직접 변경할 수 있습니다.

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

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