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만 그 아래에 따로 선언을 해주면 됩니다.
구매처 : 
구매처 : 
우와... 이런 팁이... (...랄까 이제까지 div에도 hover를 줄 수 있는지 전혀 모르고 있었습니다.) 아무튼 올려주신 코드는 감사히 사용하도록 하겠습니다.^^
IE 구 브라우저를 제외한 거의 모든 최신 브라우저는 앵커 이외에 모든 태그에 :hover 속성을 사용가능합니다^^ IE 구 브라우저에서는 위에서 설명드린 expression을 사용하면 되겠지요. 활용해보세요^^
아.. 그게 앵커 말고도 가능한 것이었나요? 예전에 나모 웹에디터(..) 책에서 앵커태그에 적용하는 것 보고는 줄곧 앵커태그에만 조금씩 써와서 몰랐네요.
그나저나 저런 방법이 있군요.. 흐음.. 멋집니다 :D
네, 위에 나인테일님에게 드린 답변 그대로 입니다. :hover가 다양한 엘리먼트에 적용되면서 그 활용폭도 넓어졌지요.. 유용하게 활용하시길 바랍니다^^
세상에 expression으로 Function까지 만들어 사용할 수 있을 줄은 상상도 못했습니다. 좋은 내용 감사합니다!
저도 처음에는 깜짝 놀랐었죠..
아마 익스를 제외한 대부분의 브라우저가 웹표준을 제대로 지원하고 있는데요(사파리는 쫌 미쳤지만 ㅋ) 웹표준이 제대로 지원안 될때 익스에 활용하면 좋은 코드라 생각됩니다. 마침 익스프레션이 익스 전용 코드라^^;
이곳에서 쓰이는 매뉴가 너무나 마음에듭니다. css로만 했다는것이 더맘에듭니다.
분석이 좀힘듭니다.
간단한예제하나 있으면 한번 열심히 연구좀해보고싶은데 가능할런지 모르겟네요
아무나 연습하던 예제라도 하나 보네주세요
mayfull@netian.com 감사합니다. 복받으세요
박군님 안녕하세요^^
요즘 제가 시간이 많이 부족해서..
예제를 만들어서 보내드릴 시간이 없을 것 같아요..
추후 시간이 된다면 예제를 만들어서 메일로 쏴드릴게요..
혹시 그 전에 급하시다면 위 포스팅의 주소를 잘 살펴보시면 금방 이해하실 수 있으리라 생각되요~
기본 틀은 이거에요
li:hover ... hover 가.. a 태그 이외에도 먹히는 점이에요..
hover 했을때.. 테이블을 보였다 감췄다하는원리니... 잘 하실 수 있으리라 생각됩니다..
맘 상해 하시지마시구
좋은 하루 되세요^^
3일째인가 님홈피에 죽치구있는데
도저희 menuOver 를 어떻게 구현해야지 매뉴가 튀어나오는지 이해가 안갑니다. ㅎ
매뉴를 어떻게 디자인하는지 ㅎ
감도 오지 않내요.. 아~~~~ 머리에 스팀이 놀아요 ~~
<li class="menu01"><a href="url" class="ttlink">매뉴1</a></li>
매뉴1 마우스가올라가면 a:hover가 동작하죠?
a:hover에 넣을수있는거는 색갈이나,밑줄이나 그런건데...
li:hover도 그것을 흉내낼수 있다는거?
그렇다면? 매뉴는 어떻게 ?
도통감으인잡혀 질문도 안되내요 ㅎ
몇일 스팀돌아보고, 힘좀주이소 .. 안돌아가도 좋으니까 개념만들어가게 하나 올리주이소 ㅎ
태이블이 보였다 안보였다하면, 안보이는테이블이라도 자리는 잡구 있어야하는거 아닌가요? 그렇다면, 다른창에 태이블? 위치는 어떻게 잡죠? 바로 밑에로?
인테넷의 바다를 허우적대다가 진기고갈로 내상을 입었음.
운기조식에 들어가야할듣....
책한권 소개해주세요..
아니면 웹사이트라도..
귀찮게 하여 죄송합니다.
li: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 바로 아래에 뜨게되겠구요..
도움이 되실런지 모르겠습니다^^;;
오옷~~ 어쩐지 계속 안되더라니 IE 6.0이라서 그랬던 것이군요~!!!
방금 적용시켰더니 잘 되네요~ 꺄오~~ 정말 감사합니다. 꾸벅~
네, 수고하세요~^^
안녕하세요^^
인터넷 검색하다가 오게 됐습니다.
댓글들을 보니까 2008년 글인거 같은데 2010년에 댓글을 달게 되서 혹시 못 보는건 아닌가 걱정부터 앞서네요.ㅜ
li:hover를 해서 table의 display를 block을 주라고 하셨는데요.(2008/03/19 00:14 쏭군님 댓글)
li:hover에 속성을 주는 방법은 알겠는데 (li:hover {color:#fff;}식으로..)
li:hover로 table의 display를 컨트롤 하는 방법은 정말 모르겠네요. ㅜ ㅜ
이 방법에 알아보고 있었거든요.. 때마침 방법이 써 있어서 자세히 읽어 봤지만
정확한 코딩 방법에 대해선 여전히 모르습니다 ㅠ
부디 이 글을 보시게 된다면 답변을 좀 부탁 드립니다.. ㅜ
tg0825@gmail.com으로 보내주신다면 더 없이 감사하겠습니다.
그럼 오늘 하루도 잘 마무리 하시고 항상 행복하세요.
안녕하세요~
:hover 가상 엘리먼트는 IE6에서는 a 에서만 먹습니다;;;
다른 브라우저에서는 모두 작동합니다만
유독 ie6에서는 a 에서만 :hover가 작동하지요;
그래서 글 본문에 CSS에서 expression을 이용하는 방법을
설명드렸는데 expression 어느 부분이 이해가 잘 안되는지
말씀해 주시면 제가 아는 한도에서 말씀드리겠습니다^^
감사합니다. 송종식 드림.
expression도 방법이 될 수 있지만 속도가 저하되므로 지양해야합니다.
behavior가 더 날지 않을까 싶네요~
그니님 금쪽같은 조언 감사합니다.
참고하겠습니다. 좋은 공부가 되었습니다^^
ㅠㅅㅠ 와~~ 너무너무 감사합니다.
다른방법들은 몇가지 해보다가 적용도 잘 안되고 방법도 복잡해서 포기할려던 참에
쏭군님 글을 딱 발견해서 해봤더니 넘 잘 되네요
오로지 css만 수정가능한 상황이어서 넘넘 감동적이예요~!!
정말 감사합니다 ^^
잘 해결하셨다니 다행입니다^^