마우스가 CSS를 통과할 때 표시 스타일을 숨기는 방법-프런트엔드 Q&A-php.cn

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

青灯夜游

풀어 주다： 2022-09-22 17:49:56

원래의

4724명이 탐색했습니다.

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

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

이 튜토리얼의 운영 환경: 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>

로그인 후 복사

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

설명:

: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>

로그인 후 복사

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

"display:none;" 스타일

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를 통과할 때 표시 스타일을 숨기는 방법 (학습 영상 공유: