IE6/5.5에서 :hover :focus 속성 앵커태그 이외에 주는 법

CSS의 :hover 이벤트는 마우스가 엘리먼트 위에 올라가있을 때 발생합니다. 이것은 될 수 있으면 자바스크립트의 onmouseover 를 사용하지 않고도, 디스플레이를 컨트롤 할 수 있기 때문에 편리합니다. 최근에 나오는 브라우저는 앵커태그(a) 이 외에 다른 엘리먼트 에서도 :hover 를 사용할 수 있도록 되어있습니다.

하지만 익스플로러 6 이하 브라우저에서는 오직 앵커 태그에서만 :hover가 작동하고, 다른 엘리먼트에서는 작동하지 않는 문제가 있습니다.

지 금 제 블로그 메인 메뉴에 마우스를 올리면 뜨는 서브메뉴도 자바스크립트를 일체 사용하지 않고 CSS로만 만들어 진 것 입니다(올블로그 툴바가 있는 상태에서는 오작동합니다. 원인은 찾지 못했습니다). li:hover 기능을 이용해서 만든 것인데, 모든 최신 브라우저에서 별 문제 없이 작동을 합니다만, IE6 이하에서만 동작을 하지 않았습니다.

아래의 해결법으로 IE6에서도 문제없이 풀다운되는 메뉴를 구현할 수 있었습니다.

이 럴때는 expression을 사용하면 강력한 CSS컨트롤을 할 수 있습니다. 단점으로는 익스플로러 계열에서만 작동한다는 점인데요. 그래서 오히려 제 블로그 같은 서브메뉴를 구현할때는 장점으로 부각될 수 있습니다. li:hover 가 IE6 이하에서 인식을 못하고 다른 브라우저에서는 정상인식을 하므로 IE6 이하의 브라우저에서만 expression을 적용시키면 되기 때문입니다.

활용소스는 다음과 같습니다.

HTML 코드
<div class="menu">
 이 레이어를 컨트롤 하기 위함입니다
<div>

CSS 코드
/* IE6 이외의 브라우저 */
.menu      {
 padding:50px;
 text-align:center;
}
.menu:hover,
.menuOver  { /* menuOver는 html에 선언되지 않았지만, 마우스가 올라갔을 때를 디자인합니다. */
 background: #ff0000;
}

/* IE6과 그 이하의 브라우저 */
.menu  {
 behavior: expression(
  this.onmouseover = new Function("this.className += ' menuOver';"),
  this.onmouseout = new Function("this.className = this.className.replace(' menuOver', '');"),
  this.style.behavior = null
 );
}

일 반적인 최신 브라우저는 위 소스에서 사용된 div:hover 가 작동합니다. 하지만 IE6 이하의 브라우저에서는 작동하지 않기 때문에, expression을 활용해서 강제로 div:hover 와 똑같은 효과가 구현 가능하도록 한 것입니다.
빨간 부분을 자신에게 맞게 고쳐서 쓰시면 됩니다. CSS는 상속중심의 코드이기 때문에, 기본적으로 상속받을 것은 받고, IE6 에서 사용할 expression만 그 아래에 따로 선언을 해주면 됩니다.


http://monoeyes.com/394