CSS 호버란 무엇입니까?
CSS의 :hover 선택기는 커서가 요소 위에 있는 동안 해당 요소에 스타일을 적용합니다. 상호작용 효과를 생성하거나 요소가 상호작용할 때 주의를 끌기 위해 자주 사용됩니다.
완전한 형태의 IDE
태그 이름, 클래스 또는 ID를 사용하여 :hover 선택기로 요소를 타겟팅할 수 있습니다.
예를 들어:
.button:hover { background-color: #ff0000; color: #ffffff; } 이전 예제의 배경색은 사용자가 '버튼' 클래스가 있는 요소 위로 마우스를 가져가면 빨간색(#ff0000)으로 바뀌고, 텍스트 색상은 흰색(#ffffff)으로 변합니다.
:hover 선택기를 글꼴 크기, 테두리 또는 변형과 같은 다른 CSS 요소와 결합하여 다양한 호버 효과를 생성할 수 있습니다. 이는 웹사이트나 애플리케이션의 시각적 피드백과 상호작용성을 향상시키는 강력한 도구입니다.
통사론:
:hover { css declarations; } CSS를 사용하여 호버를 이해하기 위한 몇 가지 예를 살펴보겠습니다.
예시 1:
HTML 코드:
Hover Me
CSS 코드:
.hover-button { background-color: #eaeaea; color: #333333; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.3s ease; } .hover-button:hover { background-color: #ff0000; color: #ffffff; } 설명:
위의 예에는 클래스 호버 버튼이 있는 버튼이 있습니다. 버튼의 초기 색상 조합은 밝은 회색 배경(#eaeaea)과 어두운 회색 텍스트(#333333)입니다. 버튼 위로 마우스를 가져가면 배경색이 빨간색(#ff0000)으로 변경되고 텍스트 색상이 흰색(#ffffff)으로 변경됩니다.
0.3초의 지속 시간과 부드러운 타이밍 기능을 갖춘 호버 버튼 클래스의 전환 속성은 마우스를 버튼 위로 가져갈 때 배경색 변경에 대한 부드러운 전환을 보장합니다.
예시 2: 이미지 확대/축소 효과
HTML 코드:
CSS 코드:
.image-zoom { overflow: hidden; } .image-zoom img { transition: transform 0.3s ease; } .image-zoom:hover img { transform: scale(1.2); } 예 3: 링크 밑줄 효과
HTML 코드:
<a href="#">Hover Me</a>
CSS 코드:
배쉬 엘리프
.underline-link { text-decoration: none; transition: border-bottom 0.3s ease; } .underline-link:hover { border-bottom: 2px solid #ff0000; } CSS의 Hover 기능
다양한 장점과 기능을 제공하는 CSS:hover 기능을 사용하여 웹 페이지의 상호작용성과 시각적 효과를 향상시킬 수 있습니다. 다음은 몇 가지 필수 CSS 호버 기능입니다.