호버가 작동하지 않는 경우 수행할 작업-CSS 튜토리얼-php.cn

호버가 작동하지 않는 경우 수행할 작업

藏色散人

풀어 주다： 2023-01-03 09:27:15

원래의

9198명이 탐색했습니다.

Hover가 작동하지 않는 해결 방법: 1. ":hover" 앞의 공백을 확인하고 삭제합니다. 2. 올바른 클래스 이름을 확인하고 수정합니다. 3. ":link"와 ":visited" 사이에 ":hover"가 있는지 확인합니다. , 위치를 수정하면 됩니다.

호버가 작동하지 않는 경우 수행할 작업

이 튜토리얼의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터.

CSS에서 hover가 작동하지 않는 데에는 여러 가지 이유가 있습니다:

1. 설정하기 전에 공백을 추가하세요:hover:

예를 들어,

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

로그인 후 복사

마우스가 클래스 1을 지나갈 때 배경이 바뀌지 않는 것을 발견했습니다. 그러나 다른 개체는 div의 배경색이 변경됩니다.

설명: :hover 앞에 공백을 추가하면 :hover 자체의 효과는 없지만 하위 요소에는 :hover의 효과가 있습니다.

[추천 학습: css 동영상 튜토리얼]

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

이때 하위 요소와 형제 요소(요소 바로 뒤의 형제 요소)만 표시됩니다. ) )는 유효하지만 다른 :hover는 유효하지 않습니다

3. 클래스 이름이 잘못 작성되었습니다.

4.:hover가 :link 및 :visited 앞에 위치합니다.

CSS 정의에서 a:hover는 다음과 같아야 합니다. a:link 및 a:visited 뒤에 배치되는 경우에만 유효합니다.

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

위 내용은 호버가 작동하지 않는 경우 수행할 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!