CSS의 hover 의사 클래스는 마우스를 요소 위로 가져갈 때 요소의 스타일을 변경할 수 있는 매우 일반적으로 사용되는 선택기입니다. 이 문서에서는 hover 사용법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 기본 사용법
hover를 사용하려면 먼저 요소의 스타일을 정의한 다음 :hover 가상 클래스를 사용하여 마우스를 가리키고 있을 때 해당 스타일을 지정해야 합니다.
예를 들어 버튼 요소가 있고 마우스를 버튼 위로 가져가면 버튼의 배경색이 빨간색으로 변경되고 텍스트 색상이 흰색으로 변경됩니다.
HTML 코드:
<button class="btn">按钮</button>
CSS 코드:
.btn { background-color: blue; color: white; } .btn:hover { background-color: red; color: white; }
위 코드에서 .btn은 버튼의 기본 스타일을 정의하는 버튼 요소의 클래스 선택자입니다. 그런 다음 .btn:hover에서 마우스 오버 시 버튼 스타일을 정의합니다.
2. 다양한 요소에 대한 적용
hover는 일반 HTML 요소뿐만 아니라 다른 특수 요소에도 적용할 수 있습니다. 다음은 몇 가지 일반적인 사용 시나리오와 특정 코드 예제입니다.
CSS 코드:
a:hover { color: red; }
HTML 코드:
<img src="image.jpg" alt="图片" class="img">
CSS 코드:
.img { transition: all 0.3s ease; } .img:hover { transform: scale(1.1); }
위 코드에서 .img 클래스는 이미지의 기본 스타일을 정의합니다. 마우스를 이미지 위로 가져가면 :hover 가상 클래스를 사용하여 마우스를 가져갈 때 이미지가 1.1배 확대되도록 변환 속성을 설정합니다.
HTML 코드:
<nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul>
CSS 코드:
nav ul li a { color: #333; transition: all 0.3s ease; } nav ul li a:hover { color: red; transform: translateY(-5px); }
위 코드에서는 색상 변경 및 5픽셀 오프셋을 포함하여 a 태그에 :hover 의사 클래스를 추가하여 마우스 오버 시 스타일을 설정했습니다. .
3. 결론
hover는 CSS에서 일반적으로 사용되는 의사 클래스 선택기로, 마우스를 가리키면 요소의 스타일을 변경하는 데 도움이 됩니다. 이 글의 소개와 코드 예시를 통해 모두가 호버 사용법을 더 잘 이해하고 적용하는 데 도움이 되기를 바랍니다. 실제 프로젝트에서는 모든 사람이 자신의 필요와 아이디어에 따라 호버를 보다 유연하게 사용하여 풍부한 효과를 얻을 수 있습니다.
위 내용은 CSS에서 호버를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!