CSS에서 hover 속성을 사용할 때 가끔 응답이 없는 이유는 무엇입니까? (예)-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 hover 속성을 사용할 때 가끔 응답이 없는 이유는 무엇입니까? (예)

藏色散人

Aug 10, 2018 pm 05:24 PM

CSS에서 hover를 사용할 때 가끔 유효하지 않은 상황이 발생하는데, 이는 정말 걱정스럽습니다. 그렇다면 실패의 원인은 정확히 무엇입니까? 이 문서에서는 CSS에서 hover가 실패하는 이유를 요약합니다.

CSS에서 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>css中hover的用法测试</h1>
<div class="one">
	<div class="two">
	</div>
	<div class="three">	
	</div>
	<div class="four">	
	</div>
</div>
</body>

로그인 후 복사

유효하지 않은 이유 요약:

1. 위 코드를 테스트해본 결과 클래스별로 마우스가 지나갈 때 배경이 바뀌지 않는 것으로 나타났습니다. 하나는 있지만 다른 div의 배경색은 변경되지 않습니다. 변경 사항에 따르면 :hover 앞에 공백을 추가해도 :hover 자체의 효과는 없지만 하위 요소에는 :hover의 효과가 있습니다.

2. 하위 요소와 형제 요소(요소 바로 뒤의 형제 요소)만 적용됩니다. 기타 :hover는 유효하지 않습니다.

3. :hover가 :link와 사이에 위치합니다. :visited는 이전에도 유효하지 않았습니다.

참고:

:hover 선택기는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다.
팁: :hover 선택기는 링크뿐만 아니라 모든 요소에 사용할 수 있습니다.

팁: :link 선택기는 방문하지 않은 페이지를 가리키는 링크 스타일을 설정하고, :visited 선택기는 방문한 페이지에 대한 링크를 설정하는 데 사용되며, :active 선택기는 활성 링크에 사용됩니다. CSS 정의에서 스타일이 적용되려면 :hover가 :link 및 :visited(있는 경우) 뒤에 와야 합니다.

위 내용은 CSS에서 hover 속성을 사용할 때 가끔 응답이 없는 이유는 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.