Whatever:hover : 익스플로러 CSS의 hover이벤트 지원

최근에 나온 대부분의 웹브라우저들은 모든 html요소에 :hover 선택자를 지원합니다. :hover 선택자를 사용함으로서, Javascript없이, 단지 CSS 만으로도 테이블의 한 행에 마우스를 올려놓을 경우에 대한 효과를 적용할 수 있습니다. 하지만 인터넷 익스플로러의경우, 사용자가 사용하는 브라우저의 버전에 따라서 :hover의 사용가능여부가 달라집니다.

Whatever:hover는 인터넷 익스플로러 6,7,8버전의 :hover, :active, :focus 선택자의 기능을 개선하도록 제작된 스크립트이며, 이 스크립트를 통하여 인터넷 익스프로러에서도 선택자를 사용하여, 다른 브라우저에서 나타나는것과 동일한 효과를 볼 수 있습니다. 버전 3의 경우 ajax를 지원함으로서, 자바스크립트를 사용하여 삽입된 html태그에 대해서도 위의 선택자들을 사용할 수 있게 되었습니다.

*역주: 인터넷 익스플로러 6버전에서는 a태그를 제외한 다른 모든 태그에서 hover가 먹지 않는다..

사용 방법 :
whatever:hover를 body영역에 넣으면 설정이 완료됩니다. 참고로, behavior에 들어가는 URL은 css파일이 아닌, html파일에 대하여 상대적인 주소가 들어갑니다. 아래와 같이 사용하세요,
body {
behavior: url("csshover3.htc");
}

작동 원리 :
모든 브라우저들은 자바스크립트를 사용하여 스타일시트의 규칙을 확인하거나, 새로이 규칙을 추가할 수 있도록하는 방법을 제공하고 있습니다. 보통, 익스플로러의 경우 지원하지 않는 모든 항목에 대하여 "unknown"이라는 값을 반환합니다. 예를 들어서 "div p:first-child"의 경우, "div p:unknown"로 변환되고, "p a[href]"의 경우는 "unknown"으로 변환되게 됩니다. 하지만 다행히도 익스플로러는 :hover 선택자를 인지하고 (그에대한 수행은 하지 않은 채) 그대로 놔두게 됩니다.

익스플로러는 또한 동/정적으로 미리 저장되었거나, htc나 hta 확장자를 가진 파일을 통해서 사용자가 직접 만들 수 있는 behavior라는 기능을 제공합니다. behavior는 스타일시트를 통해서 html에 링크되며, 지정된 behavior를 통해서 규칙지정자는 하나의 노드에 대해 더욱 향상된 기능을 제공할 수 있습니다.

위에 적어놓은 사항들을 사용하면, 익스플로러가 지원하지 않는 스타일 규칙을 찾는 behavior를 만들 수 있을 뿐만 아니라, 사용자가 지정한 방식으로 스타일 규칙을 처리할 수 있습니다. 이것은 다음과 같은 과정을 거치게 됩니다.

1. 익스플로러가 지원하지 않는 모든 :hover에 대한 스타일시트를 찾는다.
2. 새로운 클래스명을 사용하여 익스플로러가 지원하는 새로운 규칙을 생성한다.
3. 새로운 클래스명을 위한 스크립트 이벤트를 설정한다.

이러한 방식으로, :hover, :active, :focus는 익스플로러에서 지원될 수 있습니다. 그리고 개발자는 모든것이 자동으로 처리되기 때문에 behavior를 추가하는것으로서 모든 문제가 해결됩니다.

버전 1,2와 달리, 버전 3은 동적으로 추가된 html에 대해서도 지원을 합니다. 1,2버전과 와 3버전이 다른 점은 1,2버전의 경우 페이지를 로드할때에만 해당하는 요소에 대해서 위의 과정을 실행했지만, 3버전에서는 표현식을 사용함으로서 노드들이 그들자신에게 다시 콜백할 수 있게 하였다는 것입니다. 더 자세한 사항은 주석처리된 파일을 참고하세요.


=============================
오래전에 이 문제를 겪어서 whatever:hover를 발견했었는데, 이번에 다시 동일한 문제에 봉착했다. 문제는 역시 IE6상에서 a태그 이외의 태그는 hover가 적용이 안된다는것. 기억이 가물가물해서 인터넷을 한참 헤매다가 마침내 그때 발견한 솔루션을 발견하였다.. 역시 블로그의 장점은. 기록해놓으면 나중에 찾기 쉬워진다는 점이다. behavior에 관련한 한국어로 된 문서가 너무 없어서 다음에 공부하는 셈치고 한번 글을 작성해보는것도 좋을거같다.


아 그리고 출처는 여기! csshover3.htc 파일 다운로드도 여기에서!
csshover3.htc 소스파일을 분석해보니 꽤 신기했다. 이것도 글로 작성하고 싶은데... 시간은 없다...ㅠㅠ
http://www.xs4all.nl/~peterned/csshover.html