이런경우에 관련자바로 만들려고하는데.. 정보
이런경우에 관련자바로 만들려고하는데..
본문
마우스 over / out 시에 마우스이벤트를 주기위해 먼저 스타일시트에서
.more_over{width:100%;line-height:135%;padding: 2 2 2 15;어쩌고저쩌고...}
.menu_sua {width:100%;line-height:135%;padding: 2 2 2 15;어쩌고저쩌고...}
이런식으로 지정했고요
적용시킬곳에
<div class="menu_sua" onmouseover="this.className='more_over';" onmouseout="this.className='menu_sua';">
이런식으로 적용을했어요.
문제는 적용시킬곳이 많아서 일일이 저런식으로 지정을 하다보니
코딩도길어지고 용량도 많아져서 문제가 되더라구요.
위의 적용부분에서
/onmouseover="this.className='more_over';" onmouseout="this.className='menu_sua';"/
요부분을 자바로짜서 간단하게 적용시킬수 있는 방법이 없겠는지요?
한수 부탁드립니다.
댓글 전체
스타일 시트로 처리하시면 됩니다.
.menu_sua
{
어쩌고 저쩌고..
}
.menu_sua:hover
{
width:100%;line-height:135%;padding: 2 2 2 15;어쩌고저쩌고...
}
.menu_sua
{
어쩌고 저쩌고..
}
.menu_sua:hover
{
width:100%;line-height:135%;padding: 2 2 2 15;어쩌고저쩌고...
}
.menu_sua a:hover{width:100%;line-height:135%;padding: 2 2 2 15;어쩌고저쩌고... }
이렇게하면 변화가 있기는 있는데..의도랑 틀리게 나오네요..으음..
이렇게하면 변화가 있기는 있는데..의도랑 틀리게 나오네요..으음..
관련 URL을 올려주시면 확인 가능합니다.^^
CSS로 해도.. 브라우저마다 지원되는 것이 틀리고..
변수가 많기 때문에..
어떤 상황이신지 정확히 알아야 답변드리기 쉬울것 같습니다.^^
CSS로 해도.. 브라우저마다 지원되는 것이 틀리고..
변수가 많기 때문에..
어떤 상황이신지 정확히 알아야 답변드리기 쉬울것 같습니다.^^
아래소스를 에디터로 실행해보시면 차이점을 발견하실수있을겁니다.
--------------------------------------------------------------------
<style>
.menu_sua {width:100%;line-height:135%;padding: 2 2 2 15;background-image:url('http://www.ww0ww.net/board/office_xp/office_xp_arrow.gif');background-repeat:no-repeat;background-position:left center;}
.more_over{width:100%;line-height:135%;padding: 2 2 2 15;background-image:url('http://www.ww0ww.net/board/office_xp/icon_li.gif');background-repeat:no-repeat;background-position:left center;background-color:#EAEDF3;}
.menu_sua a:hover{width:100%;line-height:135%;padding: 2 2 2 15;background-image:url('http://www.ww0ww.net/board/office_xp/icon_li.gif');background-repeat:no-repeat;background-position:left center;background-color:#EAEDF3;}
</style>
<div class="menu_sua" onmouseover="this.className='more_over';" onmouseout="this.className='menu_sua';"><a href="#" >마우스오버/온 적용</a></div>
<div class="menu_sua"><a href="#" >a:hover 적용</a></div>
----------------------------------------------------------------------------------
그래서 자바로 할 수있는 방법이 없나 했던거구요..스타일시트에서만으로는 힘들것 같아요...
--------------------------------------------------------------------
<style>
.menu_sua {width:100%;line-height:135%;padding: 2 2 2 15;background-image:url('http://www.ww0ww.net/board/office_xp/office_xp_arrow.gif');background-repeat:no-repeat;background-position:left center;}
.more_over{width:100%;line-height:135%;padding: 2 2 2 15;background-image:url('http://www.ww0ww.net/board/office_xp/icon_li.gif');background-repeat:no-repeat;background-position:left center;background-color:#EAEDF3;}
.menu_sua a:hover{width:100%;line-height:135%;padding: 2 2 2 15;background-image:url('http://www.ww0ww.net/board/office_xp/icon_li.gif');background-repeat:no-repeat;background-position:left center;background-color:#EAEDF3;}
</style>
<div class="menu_sua" onmouseover="this.className='more_over';" onmouseout="this.className='menu_sua';"><a href="#" >마우스오버/온 적용</a></div>
<div class="menu_sua"><a href="#" >a:hover 적용</a></div>
----------------------------------------------------------------------------------
그래서 자바로 할 수있는 방법이 없나 했던거구요..스타일시트에서만으로는 힘들것 같아요...
수정했습니다.
=============================================
<style>
.menu_sua a
{
width:100%;
line-height:135%;
padding: 2 2 2 15;
background-image:url('http://www.ww0ww.net/board/office_xp/office_xp_arrow.gif');
background-repeat:no-repeat;
background-position:left center;
}
.more_over
{
width:100%;
line-height:135%;
padding: 2 2 2 15;
background-image:url('http://www.ww0ww.net/board/office_xp/icon_li.gif');
background-repeat:no-repeat;
background-position:left center;
background-color:#EAEDF3;
}
.menu_sua a:hover
{
width:100%;
line-height:135%;
padding: 2 2 2 15;
background-image:url('http://www.ww0ww.net/board/office_xp/icon_li.gif');
background-repeat:no-repeat;
background-position:left center;
background-color:#EAEDF3;
}
</style>
<div class="menu_sua" onmouseover="this.className='more_over';" onmouseout="this.className='menu_sua';">
<a href="#" >마우스오버/온 적용</a>
</div>
<div class="menu_sua"><a href="#" >a:hover 적용</a></div>
=======================================================
a:hover에 주셨으면.. menu_sua도 menu_sua a 에 스타일을 적용 하시면 됩니다.
그러고보니.. div:hover는 익스플로러에서는 안먹히는군요..^^;;
요즘은 왜이리 깜빡깜빡 하는지..^^
=============================================
<style>
.menu_sua a
{
width:100%;
line-height:135%;
padding: 2 2 2 15;
background-image:url('http://www.ww0ww.net/board/office_xp/office_xp_arrow.gif');
background-repeat:no-repeat;
background-position:left center;
}
.more_over
{
width:100%;
line-height:135%;
padding: 2 2 2 15;
background-image:url('http://www.ww0ww.net/board/office_xp/icon_li.gif');
background-repeat:no-repeat;
background-position:left center;
background-color:#EAEDF3;
}
.menu_sua a:hover
{
width:100%;
line-height:135%;
padding: 2 2 2 15;
background-image:url('http://www.ww0ww.net/board/office_xp/icon_li.gif');
background-repeat:no-repeat;
background-position:left center;
background-color:#EAEDF3;
}
</style>
<div class="menu_sua" onmouseover="this.className='more_over';" onmouseout="this.className='menu_sua';">
<a href="#" >마우스오버/온 적용</a>
</div>
<div class="menu_sua"><a href="#" >a:hover 적용</a></div>
=======================================================
a:hover에 주셨으면.. menu_sua도 menu_sua a 에 스타일을 적용 하시면 됩니다.
그러고보니.. div:hover는 익스플로러에서는 안먹히는군요..^^;;
요즘은 왜이리 깜빡깜빡 하는지..^^
우왓~...너구리님 고맙습니다.
포기단계였는데...잘쓰겠습니다.
포기단계였는데...잘쓰겠습니다.
별말씀을요.. 즐거운 하루되세요^^
