CSS와 HTML을 사용하여 호버 시 이미지 겹침을 방지하는 방법은 무엇입니까?

CSS/HTML을 사용하여 마우스 오버 시 이미지 겹침 수정

CSS 및 HTML을 사용하여 마우스 오버 시 이미지를 변경하려고 할 때 원본 이미지가 계속 표시되거나 새 이미지의 크기가 잘못 조정되어 나타납니다. 이 문제를 해결하는 방법은 다음과 같습니다.

HTML에 ID가 "Library"인 요소:

<img src="LibraryTransparent.png">

CSS에는 다음과 같은 스타일 규칙이 있습니다.

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

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

여기서 문제는 배경을 변경하는 동안 발생한다는 것입니다. 호버 상태의 이미지를 사용하면 원본 이미지가 숨겨지지 않습니다. 이 문제를 해결하려면 디스플레이 속성을 사용하여 마우스를 올리면 원본 이미지가 보이지 않게 만들 수 있습니다.

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

또는 JavaScript를 사용하여 마우스 오버 요소:

document.getElementById("Library").onmouseover = function() {
  this.src = 'LibraryHoverTrans.png';
};

document.getElementById("Library").onmouseout = function() {
  this.src = 'LibraryTransparent.png';
};

이러한 솔루션 중 하나를 구현하면 원본 이미지가 숨겨지고 이미지 위로 마우스를 가져갈 때 새 이미지의 크기가 올바르게 표시되도록 할 수 있습니다.

위 내용은 CSS와 HTML을 사용하여 호버 시 이미지 겹침을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!