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초의 지속 시간과 부드러운 타이밍 기능을 갖춘 호버 버튼 클래스의 전환 속성은 마우스를 버튼 위로 가져갈 때 배경색 변경에 대한 부드러운 전환을 보장합니다.

링크( ), 이미지( ), div( ) 또는 대화형으로 만들려는 기타 요소는 유사한 호버 효과를 사용할 수 있습니다. :hover 선택기 내에서 속성과 값을 변경하여 디자인 요구 사항에 맞는 다양한 호버 효과를 만들 수 있습니다.

예시 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 호버 기능입니다.

상호작용 효과::hover 선택기를 사용하여 요소 위로 마우스를 가져갈 때 요소의 모양을 변경하여 대화형 효과를 생성할 수 있습니다. 사용자가 콘텐츠와 상호 작용할 때 배경색, 텍스트 색상, 불투명도, 상자 그림자, 변형 등과 같은 속성을 변경하여 시각적 피드백을 표시할 수 있습니다.여러 요소 타겟팅::hover 선택기를 사용하여 페이지에서 여러 요소를 선택할 수 있습니다. 이는 버튼, 링크, 이미지, 탐색 메뉴 및 대화형으로 만들려는 기타 요소를 포함한 다양한 요소에 대해 표준화된 호버 효과를 디자인할 수 있음을 의미합니다.전환 및 애니메이션 지원::hover 선택기를 CSS 전환 및 애니메이션과 함께 사용하면 매끄럽고 미학적으로 만족스러운 효과를 얻을 수 있습니다. 전환 또는 애니메이션 속성을 정의하면 기간, 타이밍 기능 및 기타 애니메이션 관련 설정을 지정하여 요소 위에 마우스를 올렸을 때 스타일이 변경되는 방식을 조절할 수 있습니다.추가 선택기 추가::hover 선택기를 다른 CSS 선택기와 함께 사용하면 특정 요소에 초점을 맞추거나 미리 정의된 기준에 따라 스타일을 적용할 수 있습니다. 예를 들어 :hover 선택기를 클래스 선택기, ID 선택기 또는 의사 요소와 결합하여 고유하고 맞춤화된 호버 효과를 만들 수 있습니다.접근성 지원:호버 효과를 개발할 때는 접근성을 고려해야 합니다. 화면 판독기와 같이 커서를 사용하는 보조 기술 사용자는 호버 효과에 액세스하지 못할 수도 있습니다. 이 때문에 마우스 오버 효과 없이 기본 기능이나 콘텐츠를 여전히 읽고 사용할 수 있는지 확인하는 것이 좋습니다.크로스 브라우저 지원:대부분의 최신 웹 브라우저는 CSS: hover 기능을 지원합니다. Chrome, Firefox, Safari, Edge 등을 포함하여 가장 널리 사용되는 브라우저와 호환되는 CSS 사양 구성 요소입니다. 이를 통해 다양한 플랫폼에서 모양과 동작의 일관성이 보장됩니다.