집 > 기사 > 웹 프론트엔드 > IE의 의사 클래스 호버 사용 및 BUG에 대해

IE의 의사 클래스 호버 사용 및 BUG에 대해

不言원래의: 2018-06-21 17:40:561729검색

이 글은 주로 IE에서의 의사 호버(pseudo-hover) 사용 및 BUG를 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들은 이를 참조할 수 있습니다.

IE에서의 의사 호버(pseudo-hover) 사용 및 버그. 필요한 친구가 참조할 수 있습니다.

의사 클래스 규칙: hover:
CSS1에서 이 의사 클래스는 객체에만 사용할 수 있습니다. href 속성이 없는 개체의 경우 이 의사 클래스는 효과가 없습니다.
CSS2에서는 이 의사 클래스를 모든 개체에 적용할 수 있습니다.
현재 IE5.5 및 IE6은 CSS1에서 :hover만 지원하지만 새로운 IE7에서는 Firefox는 CSS2에서 :hover를 지원합니다.
먼저 CSS2 작성 방법을 사용하여 구현하세요.

<html> 
<head> 
<style> 
* {margin:0; padding:0;} 
ul {list-style:none;margin:100px;} 
li {height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;} 
li a {display:none;} 
li:hover a{display:block; text-decoration:none;width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff;} 
</style> 
</head> 
<body> 
<ul> 
<li>鼠标移过来触发我吧！<a href="#" title="">哈哈，终于被你发现了！</a></li> 
</ul> 
</body> 
</html>

팁: 실행하기 전에 코드의 일부를 수정할 수 있습니다.

CSS2를 잘 지원하는 Firefox와 같은 브라우저에서 테스트하고 찾을 수 있습니다. Achieve는 효과를 표시할 수 있지만 IE6에서는 달성할 수 없습니다.
생각을 바꿔 CSS1의 작성 방법을 사용해 살펴보겠습니다.
CSS1에서는 li 요소:hover 사용을 지원할 수 없으므로 a에 텍스트가 포함되고 a에는 :hover가 사용되며,
CSS에서는 a를 블록 수준 요소로 설정하고 a의 크기와 너비를 li와 동일하게 만듭니다.
그리고 a를 상대 위치로 설정합니다. 위 예제에서 a를 사용하여 li를 시뮬레이션합니다.
위 예제에서 a를 시뮬레이션하고 기본적으로 범위를 숨기도록 설정합니다(display:none;).
a가 트리거되면(:hover) 범위가 표시됩니다. (display:block;);
그러나 위 방법으로 수정하면 IE6에서는 예제의 효과가 여전히 표시되지 않습니다.
이유는: IE 브라우저 자체의 구문 분석 문제는 IE5.5 및 IE6의 pseudo-class:hover 버그입니다.
이 문제를 해결하는 방법은 무엇입니까?
이 버그는 링크 속성에 특수 CSS 속성 선언을 추가하여 제거할 수 있습니다.
li a:hover {}
우리는 해당 속성에 대해 너비:100px만 설정했습니다. IE6에서는 여전히 변경 사항이 없다는 것을 발견했습니다. 너비 값을 너비:99px로 변경하려고 시도했는데 이상한 일이 발생했습니다. IE6에서는 트리거되면 숨겨진 부분이 표시됩니다. 그런 다음 li a:hover 속성에 색상만 설정하여 테스트(초기값은 #fff)하고 색상 값을 변경한 결과 IE6에서는 디스플레이가 트리거될 수 없음을 확인했습니다. . .
마지막으로 표시를 트리거할 수 없는 텍스트 장식, 색상 및 Z-인덱스(표시를 트리거할 수 없는 부분에 일부 누락된 속성이 있을 수 있음)를 제외하고 다른 속성을 사용하여 의사 클래스:호버를 제거할 수 있음을 발견했습니다. 버그 특정 속성.
참고:
1. 이 BUG를 제거하기 위해 표시 값을 특정 속성으로 변경하는 것은 권장되지 않으며 경우에 따라 이 속성이 BUG를 제거하지 못할 수도 있습니다.
2. 특정 속성인 테두리 및 배경 색상의 경우 전체 문자 및 약어를 사용하여 변경할 수도 있습니다. 예를 들어 #fff 및 #ffffff는 버그 제거 시 두 가지 다른 값으로 해석됩니다.
CSS1 작성 방법의 최종 효과:

<html> 
<head> 
<style> 
* {margin:0; padding:0;} 
ul {list-style:none;margin:100px;} 
li {height:100px; width:100px; background:#000; font-size:12px; } 
li a {display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;} 
li a:hover {background:#ccc;} 
li span {display:none; } 
li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; } 
</style> 
</head> 
<body> 
<ul> 
<li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li> 
</ul> 
</body> 
</html>

팁: 실행 전 코드 일부 수정 가능

최소 코드 구현 버전(xugang 구현):

<html> 
<head> 
<style> 
li {height:10px; width:120px; background:#000;} 
li a{height:10px; width:120px; display:block;} 
li a:hover {background:#ccc;} 
li span {display:none;} 
li a:hover span {display:block; width:100px; height:40px; background:#c00; position:absolute; top:15px; left:180px;} 
</style> 
</head> 
<body> 
<ul> 
<li> 
<a href="#" title="">鼠标移过来触发 
<span> 
<ul> 
<li>aaa</li> 
<li>aaa</li> 
</ul> 
</span> 
</a> 
</li> 
</ul> 
</body> 
</html>

팁: 실행 전 코드 일부 수정 가능

그렇습니다. 이 글의 전체 내용이 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해 주세요!

IE의 의사 클래스 호버 사용 및 BUG에 대해

관련 기사