CSS 호버를 비활성화하는 방법
- 藏色散人원래의
- 2020-11-17 10:58:473946검색
CSS hover가 실패하는 이유: 1. CSS 정의에서 "a:hover"는 "a:link" 및 "a:visited" 뒤에 위치하지 않습니다. 2. CSS 정의에서 "a:active"는 그렇지 않습니다. "a:hover" 뒤에 배치됩니다.
추천: "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!