마우스가 CSS를 통과할 때 표시 스타일을 숨기는 방법

CSS에서는 ":hover" 선택기와 표시 속성을 사용하여 마우스가 그 위로 지나갈 때 표시 스타일을 숨길 수 있습니다. 마우스 포인터가 있는 요소를 선택하려면 ":hover" 선택기만 사용하면 됩니다. 부동 상태이고 해당 상태에 대한 요소를 설정합니다. "display:none;" 스타일이면 충분하며 구문은 "specified element:hover {display:none;}"입니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 ":hover" 선택기와 표시 속성을 사용하여 마우스가 지나갈 때 표시 스타일을 숨길 수 있습니다.

":hover" 선택기를 사용하여 마우스 포인터가 떠 있는 요소를 선택하고, 이 상태의 요소에 "display:none;" 스타일을 설정하여 숨깁니다.

    
  
 hello 
  

설명:

:hover 선택기

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

팁: :hover 선택기는 링크뿐만 아니라 모든 요소에 사용할 수 있습니다.

CSS 정의에서 스타일이 적용되려면 :hover가 :link 및 :visited(있는 경우) 뒤에 배치되어야 합니다.

:link selector는 방문하지 않은 페이지를 가리키는 링크 스타일을 설정하고, :visited selector는 방문한 페이지에 대한 링크를 설정하는 데 사용되며 :active selector는 활성 링크에 사용됩니다.

사용법 1:

즉, 마우스를 스타일 a 위로 가져가면 a의 배경색이 노란색으로 설정됩니다.

a:hover { background-color:yellow; }

가장 일반적인 사용법입니다.

를 통해 스타일을 변경하면 됩니다.사용법 2:

a를 사용하여 다른 블록의 스타일 제어:

a를 사용하여 a의 하위 요소 b 제어:

.a:hover .b { background-color:blue; }

a를 사용하여 a의 형제 요소 c(형제 요소) 제어:

.a:hover + .c { color:red; }

컨트롤 사용 a의 가장 가까운 요소 d:

.a:hover ~ .d { color:pink; }

요약:

1. 하위 요소를 제어하려면 중간에 아무것도 추가하지 마세요.

2. '+' 형제 요소를 제어합니다. ' 주변 요소 제어

버튼을 사용하여 버튼 위로 마우스를 이동하면 상자가 이동을 멈춥니다.

본문 코드:

 
stop
 
 

CSS 스타일:

display:none은 공간을 차지하지 않고 요소를 숨길 수 있으므로 이 속성을 동적으로 변경하면 재배열이 발생합니다(페이지 레이아웃 변경). , 당신은 할 수 있습니다. 페이지에서 요소를 삭제하는 것과 동일한 것으로 이해됩니다. 하위 요소는 상속되지 않지만 결국 하위 항목은 모두 함께 숨겨집니다.

     
  
正常显示元素
 
隐藏元素
 
正常显示元素
  

(학습 영상 공유:

)

위 내용은 마우스가 CSS를 통과할 때 표시 스타일을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!