이 글에서는 마우스가 들어오고 나갈 때 그림을 전환하는 onmouseover 및 onmouseout의 여러 구현 방법을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게.

마우스를 안팎으로 움직여 사진을 전환하는 것은 매우 흔한 일이므로 구현 방법에 대해 이야기해 보겠습니다.

가장 간단한 방법이기도 한 첫 번째 방법은 HTML로 가능

lt; img class="img" src="img/dongtai.png" onmouseover="this.src='img/HBuilder.png'" onmouseout="this.src= 'img /dongtai.png'"/gt; 먼저 그림을 기본으로 설정한 다음 그림을 쓰고 안팎으로 이동합니다.

두 번째 방법, js 교체

lt; img name="image1" src="img/dongtai.png" onmouseover="mouseOver()" onmouseout="mouseOut( ) " /gt; function mouseOver() {

document.image1.src = "img/HBuilder.png"

}

function mouseOut() { < /p>

document.image1.src = "img/dongtai.png"

}이미지를 바꾸는 방법을 js로 작성하고 html로 호출합니다.

onmouseover 및 onmouseout을 사용하지 않는 경우 다음과 같이 작성할 수도 있습니다.

lt;p class="bg"gt;lt;/pgt;.bg{배경: url(img/HBuilder .png) no-repeat; height: 300px;}

.bg:hover{Background: url(img/dongtai.png) no-repeat;} 이 세 가지 방법으로 이동을 구현할 수 있습니다. 사진 안팎으로 마우스를 전환하는 방법은 매우 간단합니다. 시도해 볼 수 있겠죠?

요약: