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

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

藏色散人

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

원래의

4159명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!