CSS에서 호버를 사용하는 방법

CSS에서 :hover는 마우스 포인터가 가리키고 있는 요소를 선택하는 데 사용되는 의사 클래스 선택기입니다. :hover를 사용하면 사용자가 요소 위로 마우스를 가져갈 때 일부 스타일 변경 사항을 적용할 수 있습니다.

다음은 :hover를 사용하여 링크 색상을 변경하는 방법에 대한 간단한 예입니다.

a {  
  color: blue;  
}  
  
a:hover {  
  color: red;  
}

이 예에서 사용자가 링크 위로 마우스를 가져가면 링크 색상이 빨간색으로 변경됩니다. 마우스 오버가 없으면 링크 색상은 파란색입니다.

색상 변경 외에도 :hover를 사용하여 배경색, 테두리 스타일, 글꼴 크기 등과 같은 다른 스타일 변경 사항을 적용할 수도 있습니다. 다음은 좀 더 복잡한 예입니다.

button {  
  background-color: lightgray;  
  border: none;  
  padding: 10px 20px;  
  font-size: 16px;  
}  
  
button:hover {  
  background-color: gray;  
  color: white;  
  border: 2px solid white;  
  font-size: 18px;  
}

이 예에서 사용자가 버튼 위로 마우스를 가져가면 버튼의 배경색이 회색으로 변경되고 텍스트 색상이 흰색으로 변경되며 테두리도 흰색으로 변경됩니다. 18픽셀로 늘어납니다.

위 내용은 CSS에서 호버를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!