CSS에서 호버를 사용하는 방법
- 清浅원래의
- 2019-04-30 10:10:43111201검색
CSS에서 hover는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다. 구문은 "label selector:hover{style code;}"입니다. 사용법: 1. 정지된 요소에서 스타일을 직접 변경합니다. ; 하위 요소의 스타일을 변경합니다. 3. 동일한 수준의 요소 스타일을 변경합니다. 4. 주변 요소의 스타일을 변경합니다.
CSS에는 마우스를 위로 움직일 때 활성화되는 hover 속성이 있습니다. js와 유사한 일부 기능을 구현하는 데 사용할 수 있습니다. 다음 글에서는 hover 속성을 활용하는 방법을 자세히 소개하겠습니다. 모든 분들께 도움이 되었으면 좋겠습니다.
【추천 과정: CSS 튜토리얼】
hover 정의
:hover 선택기는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용되며 모든 요소에 적용됩니다.
:hover 선택기는 다음에 적용됩니다. all 요소 사용법
hover
사용법 1: 요소 위에 마우스를 올리면 요소 스타일이 변경됩니다
예: 마우스를 글꼴 위로 가져가면 글꼴 색상이 변경됩니다
<style>
h1:hover{
color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
</body>렌더링:
이것은 가장 일반적인 사용법으로, 스타일 스타일만 변경합니다
용법 2: 마우스 오버를 통해 다른 블록의 스타일을 제어합니다
이 사용법은 다음 세 가지 스타일로 나눌 수 있습니다
(1 ) 아동 요소의 스타일 제어
<style>
h1:hover p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网
<p>hover的用法</p>
</h1> rendering :
(2) 형제 자매의 스타일을 제어
'+'제어 형제 자매 요소 (형제 요소)<style>
h1:hover+p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p> rendering :
(3) 주변 요소의 스타일 제어
'~' 주변 요소 제어<style>
h1:hover~p{
background-color: pink;
}
</style>
</head>
<body>
<h1>PHP中文网</h1>
<p>hover的用法</p>Rendering:
위 내용은 CSS에서 호버를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!