이 매뉴얼의 목적은 CSS를 사용하여 마우스 오버 시 이미지를 변경하는 방법을 탐색하는 것입니다. 시작하겠습니다!
CSS에서 :hover는 무엇입니까?
:hover는 마우스가 트리거할 때 HTML 요소의 상태를 변경하는 데 사용되는 의사 클래스의 요소입니다. 이 CSS 선택기는 주로 요소의 스타일을 지정하거나 선택하는 데 사용됩니다. 단, 링크에는 적용할 수 없습니다.
통사론
:hover의 구문은 다음과 같습니다.
요소 : 호버 {
CSS 코드. . .
}
여기, ' 요소 '는 호버 효과를 적용하려는 요소를 나타냅니다.
이제 CSS를 사용하여 마우스 오버 시 이미지를 변경하는 실제 예제로 이동합니다.
예: CSS를 사용하여 호버에서 이미지를 변경하는 방법은 무엇입니까?
마우스 오버 시 이미지를 먼저 변경하려면 HTML 섹션에 두 개의 이미지를 추가합니다. 첫 번째 이미지는 활성 상태용이고 다음 이미지는 호버 상태용입니다.
1단계: 이미지 추가
지정된 목적을 위해 ' 이미지1 ' 그리고 ' 이미지2 ', 두 번째 이미지에 클래스 이름을 ' hover_img '.
HTML
< 신체 >< div 수업 = '임' >
< 이미지 src = '이미지1.png' >
< 이미지 src = '이미지2.png' 수업 = 'hover_img' >
< / div >
< / 신체 >
2단계: 이미지 스타일 지정
이제 CSS로 이동하여 '를 사용하여 두 이미지의 위치를 설정합니다. 위치 ' 재산. 우리는 ' 순수한 '를 사용하여 가장 가까운 부모를 참조하여 절대적으로 위치를 지정합니다.
CSS
.img {위치 : 순수한 ;
}
그러면 다음과 같은 결과가 표시됩니다.
다음 단계에서는 첫 번째 이미지 앞에 두 번째 이미지를 설정합니다. 이를 위해 이미지의 위치를 ' 순수한 '로 설정하고 상단 및 왼쪽 위치를 ' 0 '. 이 이미지를 사용하면 첫 번째 이미지 앞에 배치되지만 마우스를 가져갔을 때 두 번째 이미지를 표시하려고 합니다. 따라서 표시 값을 ' 없음 '는 원하는 결과를 보여줍니다.
.hover_img {위치 : 순수한 ;
맨 위 : 0 ;
왼쪽 : 0 ;
표시하다 : 없음 ;
}
주어진 코드의 출력은 다음과 같습니다.
두 번째 이미지가 첫 번째 이미지 뒤에 성공적으로 숨겨졌습니다.
이제 다음 단계로 이동합니다.
3단계: 마우스 오버 시 이미지 변경
다음으로 ' : 호버 '를 선택하고 ' .img '를 눌러 선택한 요소에 호버를 적용합니다. 그런 다음 두 번째 이미지의 클래스 이름을 ' .hover_img '. 그런 다음 괄호 안에 display 속성 값을 ' 인라인 '는 요소를 강제로 같은 줄에 맞춥니다.
.img : 호버 .hover_img {표시하다 : 인라인 ;
}
다음은 사용자가 마우스를 가져갔을 때 이미지가 변경되었음을 보여주는 결과입니다.
위에 주어진 출력은 CSS를 사용하여 호버에서 이미지를 성공적으로 변경했음을 나타냅니다.
결론
'를 사용하여 마우스를 가져갈 때 이미지를 변경할 수 있습니다. : 호버 ' 의사 클래스 요소입니다. 이렇게 하려면 HTML 파일에 필요한 이미지를 추가하고 CSS를 사용하여 동일한 위치에 설정한 다음 :hover 선택기를 적용합니다. 결과적으로 첫 번째 이미지 위로 마우스를 가져가면 변경됩니다. 이 글에서는 실제 예를 들어 :hover를 사용하여 hover 상태에서 이미지를 변경하는 방법을 설명했습니다.