CSS에서 마우스 오버 시 색상을 변경하는 방법
- WBOY원래의
- 2021-11-10 11:53:3630299검색
CSS에서는 호버 선택기와 색상 속성을 사용하여 마우스 호버 시 색상 변경 효과를 얻을 수 있습니다. 호버 선택기는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용되고 색상 속성은 색상을 설정하는 데 사용됩니다. 마우스를 올리면 색상이 지정됩니다. ":hover {color:hover color;}" 구문.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
마우스를 올리면 CSS가 색상을 변경하는 방법:
1 html 개발 도구를 열고 그림과 같이 html 파일을 만듭니다.
2. HTML 페이지에 태그를 추가하고
태그에 내용을 입력한 다음 그림과 같이:
3. 태그의 내용을 그림과 같이 파란색으로 설정합니다.
4. 라벨 위로 슬라이드하면 글꼴이 빨간색으로 변경됩니다. :a:hover{color:red} . 그림과 같이:
5. html 파일을 저장하고 브라우저로 열면 가장 먼저 보이는 것은 파란색 글꼴입니다. 텍스트 위에 마우스를 놓으면 파란색 글꼴이 변경됩니다. 빨간색 글꼴로.
6 구현된 모든 코드에 대해 코드를 html 파일에 직접 복사하여 효과를 확인하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬停字体变色</title>
<style type="text/css">
a{
color:blue;
}
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="">把鼠标放到我身上</a>
</body>
</html>참고: 마우스를 가리키고 있을 때 스타일을 변경하려면 호버 선택기를 사용해야 합니다.
hover 선택기는 마우스 포인터가 가리키고 있는 요소를 선택하는 데 사용됩니다. 호버 선택기는 링크뿐만 아니라 모든 요소에서 사용할 수 있습니다. CSS 정의에서 스타일이 적용되려면 링크 뒤에 마우스를 올려 놓고 방문해야 합니다(있는 경우).
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 CSS에서 마우스 오버 시 색상을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!