IE6/5.5에서 :hover :focus 속성 앵커태그 이외에 주는 법 2007/11/04 01:34
CSS의 :hover 이벤트는 마우스가 엘리먼트 위에 올라가있을 때 발생합니다. 이것은 될 수 있으면 자바스크립트의 onmouseover 를 사용하지 않고도, 디스플레이를 컨트롤 할 수 있기 때문에 편리합니다. 최근에 나오는 브라우저는 앵커태그(a) 이 외에 다른 엘리먼트 에서도 :hover 를 사용할 수 있도록 되어있습니다.
하지만 익스플로러 6 이하 브라우저에서는 오직 앵커 태그에서만 :hover가 작동하고, 다른 엘리먼트에서는 작동하지 않는 문제가 있습니다.
지금 제 블로그 메인 메뉴에 마우스를 올리면 뜨는 서브메뉴도 자바스크립트를 일체 사용하지 않고 CSS로만 만들어 진 것 입니다(올블로그 툴바가 있는 상태에서는 오작동합니다. 원인은 찾지 못했습니다). li:hover 기능을 이용해서 만든 것인데, 모든 최신 브라우저에서 별 문제 없이 작동을 합니다만, IE6 이하에서만 동작을 하지 않았습니다.
아래의 해결법으로 IE6에서도 문제없이 풀다운되는 메뉴를 구현할 수 있었습니다.
이럴때는 expression을 사용하면 강력한 CSS컨트롤을 할 수 있습니다. 단점으로는 익스플로러 계열에서만 작동한다는 점인데요. 그래서 오히려 제 블로그 같은 서브메뉴를 구현할때는 장점으로 부각될 수 있습니다. li:hover 가 IE6 이하에서 인식을 못하고 다른 브라우저에서는 정상인식을 하므로 IE6 이하의 브라우저에서만 expression을 적용시키면 되기 때문입니다.
활용소스는 다음과 같습니다.
<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/trackback/394
-
박군
2008/03/13 20:30이곳에서 쓰이는 매뉴가 너무나 마음에듭니다. css로만 했다는것이 더맘에듭니다.
분석이 좀힘듭니다.
간단한예제하나 있으면 한번 열심히 연구좀해보고싶은데 가능할런지 모르겟네요
아무나 연습하던 예제라도 하나 보네주세요
mayfull@netian.com 감사합니다. 복받으세요-
박군님 안녕하세요^^
요즘 제가 시간이 많이 부족해서..
예제를 만들어서 보내드릴 시간이 없을 것 같아요..
추후 시간이 된다면 예제를 만들어서 메일로 쏴드릴게요..
혹시 그 전에 급하시다면 위 포스팅의 주소를 잘 살펴보시면 금방 이해하실 수 있으리라 생각되요~
기본 틀은 이거에요
li:hover ... hover 가.. a 태그 이외에도 먹히는 점이에요..
hover 했을때.. 테이블을 보였다 감췄다하는원리니... 잘 하실 수 있으리라 생각됩니다..
맘 상해 하시지마시구
좋은 하루 되세요^^
-
-
박군
2008/03/16 21:023일째인가 님홈피에 죽치구있는데
도저희 menuOver 를 어떻게 구현해야지 매뉴가 튀어나오는지 이해가 안갑니다. ㅎ
매뉴를 어떻게 디자인하는지 ㅎ
감도 오지 않내요.. 아~~~~ 머리에 스팀이 놀아요 ~~
<li class="menu01"><a href="url" class="ttlink">매뉴1</a></li>
매뉴1 마우스가올라가면 a:hover가 동작하죠?
a:hover에 넣을수있는거는 색갈이나,밑줄이나 그런건데...
li:hover도 그것을 흉내낼수 있다는거?
그렇다면? 매뉴는 어떻게 ?
도통감으인잡혀 질문도 안되내요 ㅎ
몇일 스팀돌아보고, 힘좀주이소 .. 안돌아가도 좋으니까 개념만들어가게 하나 올리주이소 ㅎ -
박군
2008/03/18 01:48li:hover
내위에 마우스가와서 내가 변하는것 이것은 감이 잡히는데...
내위에 마우스가 왔는데 당신을 워떠게 visible하게 속성을 넣을수 있는가?
헛다리집은거같은데 힌드 제데로한번주이소 ㅎ.-
제 블로그에 계속 계셨던거에요?
어머나..
어떤걸 궁금해하시는 지 알아냈어요...
일단 메뉴에 마우스를 올리면 나오는 테이블은 메뉴 아래 태그를 위치하게 합니다..
ul
li
li
/ul
li 가 메뉴겠죠..
그 li 아래에..
li
table
tr
td /td
/tr
/table
/li
이렇게 들어가게 하는거죠..
그리고 서브메뉴로 나올 table은 기본적으로
display: none; 을 줘서 감춰둡니다.
그리고 메뉴위에 마우스가 올라갔을 때,
li:hover 일때.. table의 display: block을 주시면 됩니다.
그러면 서브메뉴가 켜졌다 꺼졌다하겠죠..
당연히 테이블의 위치는 li 바로 아래에 뜨게되겠구요..
도움이 되실런지 모르겠습니다^^;;
-
