CSS에서 호버 선택기 사용에 대한 자세한 설명-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 호버 선택기 사용에 대한 자세한 설명

小云云

Dec 05, 2017 pm 01:20 PM

hover 선택자

때때로 mouseover와 mouseout 두 가지 마우스 이벤트를 사용해야 할 때도 있지만, js를 작성하고 listening 이벤트를 추가하는 것이 더 번거롭기 때문에 CSS로 해결할 수 있는 부분은 최대한 CSS로 해결해야 성능을 향상시킬 수 있습니다. .제 생각은 이렇습니다. hover의 이해:

저희가 컴퓨터 응용 프로그램을 배울 때 선생님께서 :hover 선택기를 사용하여 드롭다운 메뉴를 완성하는 방법을 가르쳐 주셨는데요. 왜 이런 식으로 사용되었는지 적어보세요

정의 및 사용법

정의:

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

:호버 선택기는 모든 요소에 적용됩니다

사용법 1:

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

a:hover
    { 
        background-color:yellow;
    }

로그인 후 복사

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

사용법 2:

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

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

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

로그인 후 복사

a를 사용하여 a의 형제 요소 c(형제 요소)를 제어합니다.

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

로그인 후 복사

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

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

로그인 후 복사

요약하자면:

1. 자식 요소를 제어하려면 중간에 아무것도 추가하지 마세요.
3. '~'는 주변 요소를 제어합니다.

버튼을 사용하여 움직임을 제어하세요. 상자 상태, 마우스가 버튼 위로 이동하면 상자가 움직이지 않고, 마우스가 멀어지면 상자가 계속 움직입니다.

    <body>
        <p class="btn stop">stop</p>
        <p class="animation"></p>
    </body>

로그인 후 복사

성취 효과:

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7416

Cakephp 튜토리얼

1359

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

Related knowledge

CSS 팁: 전환을 사용하여 호버 상태 유지 Sep 27, 2022 pm 02:01 PM

호버 상태를 유지하는 방법은 무엇입니까? 다음 글에서는 JavaScript를 사용하지 않고 호버 상태를 유지하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.

Haval X1 카메라로 비행을 즐겨보세요. Jan 15, 2024 pm 02:21 PM

우리는 인터넷에서 멋진 하향식 영상을 자주 볼 수 있는데, 드론으로 찍은 사진은 참으로 충격적입니다. 비행이 제한되는 곳은 어디입니까? 실제로 바로 비행 가능한 "드론"이 현재 주류이며 대부분의 사람들이 선택할 가치가 더 높습니다. 오늘은 Harvest Flying Camera X1에 대한 실습 경험을 제공하겠습니다. 외관상으로 보면 Harvest Flying Camera X1은 최초의 접이식 디자인을 가지고 있습니다. 전체 카메라의 무게는 125g으로, 접은 후에는 부담 없이 손에 쥐고 가방에 넣을 수 있습니다. . 4장의 부드러운 염색잎과 안전 프레임 디자인으로 촬영의 안전을 완벽하게 보호합니다. Dyed Leaf는 탄력성이 뛰어나고 내구성이 뛰어나며 안전하고 환경 친화적인 바이오 기반 생물학적 기질을 혁신적으로 사용합니다. 이착륙 시 손을 보호할 수 있는 완벽한 보호 프레임도 있습니다.

CSS에서 호버 이벤트를 제거하는 방법 Feb 01, 2023 am 10:06 AM

CSS 호버 이벤트를 제거하는 방법: 1. "$("a").hover(function(){ Alert('mouseover'); }, function(){을 통해 2. "$('a').off('mouseenter').unbind('mouseleave');" 메소드를 통해 호버 이벤트를 바인딩 해제합니다. 할 수 있다.

CSS에서 ID 선택기의 식별자는 무엇입니까 Sep 22, 2022 pm 03:57 PM

CSS에서 id 선택기의 식별자는 "#"입니다. 특정 id 속성 값으로 표시된 HTML 요소에 대해 특정 스타일을 지정할 수 있습니다. 구문 구조는 "#ID value {attribute: attribute value;}"입니다. ID 속성은 전체 페이지에서 고유하며 반복할 수 없습니다. ID 속성 값은 숫자로 시작하면 안 됩니다. 숫자로 시작하는 ID는 Mozilla/Firefox 브라우저에서 작동하지 않습니다.

위치가 3보다 크거나 같은 하위 요소의 스타일을 선택하려면 :nth-child(n+3) 의사 클래스 선택기를 사용하십시오. Nov 20, 2023 am 11:20 AM

:nth-child(n+3) 의사 클래스 선택기를 사용하여 위치가 3보다 크거나 같은 하위 요소의 스타일을 선택합니다. 구체적인 코드 예는 다음과 같습니다. HTML 코드: <divid="container" ><divclass="item">첫 번째 하위 요소</div><divclass="item"&

CSS 의사 선택기 학습 의사 클래스 선택기 분석 Aug 03, 2022 am 11:26 AM

이전 글 "Css 의사 선택자 학습 - 의사 요소 선택자 분석"에서 의사 요소 선택자에 대해 배웠고, 오늘은 의사 클래스 선택자에 대해 자세히 살펴보는 것이 모든 분들께 도움이 되기를 바랍니다.

HTML에서 hover의 역할 Feb 20, 2024 am 08:58 AM

HTML 및 특정 코드 예제에서 호버의 역할 웹 개발에서 호버는 사용자가 요소 위에 커서를 놓으면 일부 작업이나 효과가 트리거되는 것을 의미합니다. 이는 CSS :hover 의사 클래스를 통해 구현됩니다. 이번 글에서는 hover의 역할과 구체적인 코드 예시를 소개하겠습니다. 첫째, hover를 사용하면 사용자가 요소 위로 마우스를 가져갈 때 요소의 스타일이 변경됩니다. 예를 들어 버튼 위에 마우스를 올리면 버튼의 배경색이나 텍스트 색상을 변경하여 사용자에게 다음에 수행할 작업을 상기시킬 수 있습니다.

hover가 의사 요소인 이유 Oct 09, 2023 pm 05:45 PM

Hover는 의사 요소가 아니라 의사 클래스입니다. 의사 클래스는 요소의 특정 상태나 동작을 선택하는 데 사용되는 반면, 의사 요소는 요소의 특정 부분에 스타일을 추가하는 데 사용됩니다. :hover는 요소의 특정 부분에 스타일을 추가하는 대신 요소의 특정 상태를 선택하는 데 사용되므로 :hover 의사 클래스를 사용하여 요소의 마우스 오버 상태 스타일을 지정할 수 있으며 다음을 사용할 수 있습니다. 링크에 호버 효과를 추가하는 hover 의사 클래스. 링크 위에 마우스를 올리면 링크의 색상, 배경색 등이 변경될 수 있습니다.

See all articles

CSS에서 호버 선택기 사용에 대한 자세한 설명

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제