CSS 2.1는 Pseudo-Class Selectors(사이비 클래스 선택자)를 지원하고 있다. 대표적으로 링크에 자주 사용하는 :link, :hover, :visited 가 있으며, 인풋에 사용하는 :focus와 :active 가 있다.

이 녀석들을 잘 활용하면 다이내믹한 사이트를 쉽게 만들 수 있지만, 현재 IE(버전 6 이하)에서는 a(링크에 사용하는 놈)에서만 이녀석들을 지원하고 있기에 현실적으로 사용하기 어렵다.

이중에서 가장 많이 사용하는 사이비 클래스 선택자가 hover인데, 현재로써는 이에 대한 제대로된 Hack을 찾기 어렵다. (ie7 스크립트가 해결해준다는 소문은 있지만, ie7을 이용해서 제작된 사이트를 방문한 경험이 없음)

오늘 웹서핑 중에 :hover를 이용한 배경색을 조절하는 사이트를 발견했다. 지금까지 확인했던 모든 사이트들이 ie에서는 이런 :hover 기능이 무력화되곤 했는데, 이번 사이트는 달랐다.

이 미묘한 컬러의 변화를 보라.

스타일부스터라는 사이트인데, IE의 마진과 관련된 핵을 사용하는 것 외에 특별히 다른 스크립트를 사용하지 않았음에도 불구하고 IE에서 .클래스이름:hover를 랜더링하고 있다.

이 것은 충분히 놀라운 사실이다. 특별히 hack을 사용하지 않고도 ie의 :hover 문제를 해결할 수 있다는 것은, 에릭 마이어의 CSS Drop Down Menus (well with javacript for IE)을 구현할때 js를 사용할 필요도 없어지기 때문이다. (이와 관련된 내용은 A List Apart에도 소개되고 있음)

혹시라도 이 사이트에서 :hover 관련 해법을 발견한 분이라면, 꼭 답글로 제게 방법을 가르쳐 주시면 감사~하겠습니다. 🙂