CSS 호버를 비활성화하는 방법-프런트엔드 Q&A-php.cn

CSS 호버를 비활성화하는 방법

藏色散人

풀어 주다： 2020-11-17 10:58:47

원래의

4069명이 탐색했습니다.

CSS hover가 실패하는 이유: 1. CSS 정의에서 "a:hover"는 "a:link" 및 "a:visited" 뒤에 위치하지 않습니다. 2. CSS 정의에서 "a:active"는 그렇지 않습니다. "a:hover" 뒤에 배치됩니다.

CSS 호버를 비활성화하는 방법

추천: "css 비디오 튜토리얼"

CSS에서 hover가 실패하는 몇 가지 이유:

CSS hover를 설정할 때 때때로 hover가 작동하지 않는 것을 발견할 수 있습니다. :

팁: CSS 정의에서 a:hover는 a:link 및 a:visited 뒤에 배치되어야 유효합니다.

팁: CSS 정의에서 a:active는 a:hover 뒤에 배치되어야 유효합니다.

1. 설정하기 전에 공백을 추가하세요. : before:hover 추가 공간 자체에는 :hover 효과가 없지만 하위 요소에는 :hover 효과가 있습니다.

2. 마우스가 넘어가면 다른 요소의 스타일이 변경됩니다.

이때 하위 요소와 형제 요소(요소 바로 뒤의 형제 요소)만 효과가 있고 다른 :hover는 영향을 받습니다. valid

여전히 동일한 예

<style type="text/css">  
    .one {  
        margin: 0 auto;  
        width: 400px;  
        height: 300px;  
        background: #ced05d;  
    }  
    .two {  
        margin: 0 auto;  
        width: 100px;  
        height: 100px;  
        background: #5a5aea;  
    }  
    .three {  
        margin: 0 auto;  
        width: 200px;  
        height: 100px;  
        background: #4b9c49;  
    }  
    .four {  
        margin: 0 auto;  
        width: 300px;  
        height: 100px;  
        background: #7b4141;  
    }  
    .one :hover {  
        background: #da56d0;  
    }  
</style>  
<body>  
<h1>测试</h1>  
<div class="one">  
    <div class="two">  
      
    </div>  
    <div class="three">  
          
    </div>  
    <div class="four">  
          
    </div>  
</div>  
</body>

로그인 후 복사

를

.one :hover {  
        background: #da56d0;  
    }

로그인 후 복사

로 변경하면 원하는 효과를 얻을 수 있음을 발견했습니다

.one:hover .two {  
        background: #da56d0;  
    }

로그인 후 복사

로 변경해도 효과를 얻을 수 있습니다("+" 기호가 제거되면 효과는 달성되지 않습니다)

.two:hover +.three {  
        background: #da56d0;  
    }

로그인 후 복사

로 변경하면 효과를 얻을 수 없습니다(더하기 기호가 있든 없든)

3. 클래스 이름이 잘못 작성되었습니다. :link 및 :방문했습니다;

5. 잘못 읽으셨네요;

잠깐...

위 내용은 CSS 호버를 비활성화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS 호버를 비활성화하는 방법