CSS에서 hover를 사용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS에서 hover를 사용하는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2020-12-04 17:19:20

원래의

11309명이 탐색했습니다.

CSS에서는 ":hover" 선택기를 사용하여 마우스 포인터가 떠 있는 요소를 선택한 다음 해당 요소의 스타일을 설정합니다. 구문 형식은 "element:hover{css style};"입니다. hover"는 스타일이 적용되도록 ":link" ” 및 “:visited”(있는 경우)에 있어야 합니다.

CSS에서 hover를 사용하는 방법은 무엇입니까?

관련 권장사항: "Programming Tutorial"

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

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

CSS 정의에서 스타일을 적용하려면 :hover를 :link 및 :visited(있는 경우) 뒤에 배치해야 합니다.

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

css :hover 선택기 사용법

사용법 1:

즉, 마우스가 a 스타일 위에 있을 때 a의 배경색이 노란색으로 설정됩니다

a:hover
    { 
        background-color:yellow;
    }

로그인 후 복사

이것은 가장 일반적인 사용법은 a

사용법 2:

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

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

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

로그인 후 복사

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

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

로그인 후 복사

a를 사용하여 a의 인근 요소 d를 제어합니다.

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

로그인 후 복사

요약:

1 자식 요소를 제어하려면 중간에 아무것도 추가하지 마세요. 2. '+'는 동일한 레벨 요소(형제 요소)를 제어합니다.

3. '~'는 주변 요소를 제어합니다.

예

버튼을 사용하여 상자 위로 이동할 때. 버튼을 누르면 상자가 움직이지 않고 마우스가 멀어지는데 상자는 계속 움직입니다

바디 코드:

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

로그인 후 복사

더 많은 관련 기사를 보려면

PHP 중국어 웹사이트

를 방문하세요! !

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