마우스가 CSS를 통과할 때 표시 스타일을 숨기는 방법
- 青灯夜游원래의
- 2022-09-22 17:49:564774검색
CSS에서는 ":hover" 선택기와 표시 속성을 사용하여 마우스가 그 위로 지나갈 때 표시 스타일을 숨길 수 있습니다. 마우스 포인터가 있는 요소를 선택하려면 ":hover" 선택기만 사용하면 됩니다. 부동 상태이고 해당 상태에 대한 요소를 설정합니다. "display:none;" 스타일이면 충분하며 구문은 "specified element:hover {display:none;}"입니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
CSS에서는 ":hover" 선택기와 표시 속성을 사용하여 마우스가 지나갈 때 표시 스타일을 숨길 수 있습니다.
":hover" 선택기를 사용하여 마우스 포인터가 떠 있는 요소를 선택하고, 이 상태의 요소에 "display:none;" 스타일을 설정하여 숨깁니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 520px;
height: 50px;
background-color: #008000;
}
div:hover {
display:none;
}
</style>
</head>
<body>
<div>
hello
</div>
</body>
</html>
설명:
: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. '+' 형제 요소를 제어합니다. ' 주변 요소 제어
예버튼을 사용하여 버튼 위로 마우스를 이동하면 상자가 이동을 멈춥니다.
본문 코드:
<body>
<div class="btn stop">stop</div>
<div class="animation"></div>
</body>CSS 스타일:
<style>
.animation {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: move 2s infinite alternate;
-webkit-animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
padding: 20px 50px;
background-color: pink;
color: white;
display: inline-block;
}
.stop:hover ~ .animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>
display:none은 공간을 차지하지 않고 요소를 숨길 수 있으므로 이 속성을 동적으로 변경하면 재배열이 발생합니다(페이지 레이아웃 변경). , 당신은 할 수 있습니다. 페이지에서 요소를 삭제하는 것과 동일한 것으로 이해됩니다. 하위 요소는 상속되지 않지만 결국 하위 항목은 모두 함께 숨겨집니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.display{
display:none;
}
</style>
</head>
<body>
<div>正常显示元素</div>
<div class="display">隐藏元素</div>
<div>正常显示元素</div>
</body>
</html>
(학습 영상 공유:
위 내용은 마우스가 CSS를 통과할 때 표시 스타일을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!