CSS에서 호버를 사용하는 방법-CSS 튜토리얼-php.cn

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

清浅

풀어 주다： 2020-10-13 09:08:32

원래의

111105명이 탐색했습니다.

CSS에서 hover는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다. 구문은 "label selector:hover{style code;}"입니다. 사용법: 1. 정지된 요소에서 스타일을 직접 변경합니다. ; 하위 요소의 스타일을 변경합니다. 3. 동일한 수준의 요소 스타일을 변경합니다. 4. 주변 요소의 스타일을 변경합니다.

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

CSS에는 마우스를 위로 움직일 때 활성화되는 hover 속성이 있습니다. js와 유사한 일부 기능을 구현하는 데 사용할 수 있습니다. 다음 글에서는 hover 속성을 활용하는 방법을 자세히 소개하겠습니다. 모든 분들께 도움이 되었으면 좋겠습니다.

【추천 과정: CSS 튜토리얼】

hover 정의

:hover 선택기는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용되며 모든 요소에 적용됩니다.

:hover 선택기는 다음에 적용됩니다. all 요소 사용법

hover

사용법 1: 요소 위에 마우스를 올리면 요소 스타일이 변경됩니다

예: 마우스를 글꼴 위로 가져가면 글꼴 색상이 변경됩니다

 <style>
    h1:hover{
      color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网</h1>
</body>

로그인 후 복사

렌더링:

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

이것은 가장 일반적인 사용법으로, 스타일 스타일만 변경합니다

용법 2: 마우스 오버를 통해 다른 블록의 스타일을 제어합니다

이 사용법은 다음 세 가지 스타일로 나눌 수 있습니다

(1 ) 아동 요소의 스타일 제어

<style>
    h1:hover p{
      background-color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网
<p>hover的用法</p>
  </h1>

로그인 후 복사

rendering :

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

(2) 형제 자매의 스타일을 제어

'+'제어 형제 자매 요소 (형제 요소)

<style>
    h1:hover+p{
      background-color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网</h1>
  <p>hover的用法</p>

로그인 후 복사

rendering :

Image 004.png

(3) 주변 요소의 스타일 제어

'~' 주변 요소 제어

<style>
    h1:hover~p{
      background-color: pink;
    }
  </style>
</head>
<body>
  <h1>PHP中文网</h1>
  <p>hover的用法</p>

로그인 후 복사

Rendering:

Image 004.png

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되길 바랍니다. .

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