자바스크립트 질문입니다. 마우스 온오버
본문
<style>
/* UI Object */
/* Common */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
.cate_view_all{position:relative;width:959px;padding-top:3px;border-bottom:1px solid #c9c9c9;background:url(http://static.naver.com/kin/09renewal/bg_main_category.gif) repeat-x 0 0;margin:0 auto;}
.cate_view_all h3{border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9;font-size:11px}
.cate_view_all h3 a{display:block;position:relative;width:957px;height:24px;padding:15px 0 0 15px}
.cate_view_all h3 a span{display:block;position:absolute;top:12px;left:14px;width:103px;height:17px;background:url(http://static.naver.com/kin/09renewal/h_category_all.gif) no-repeat;cursor:pointer;}
.cate_view_all .cate_list{z-index:9999;position:absolute;display:none;padding-top:21px;padding-bottom:26px;border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9;border-bottom:1px solid #c9c9c9;background:#fff}
.cate_view_all .cate_list ul{overflow:hidden;clear:both;width:957px;background:url(http://static.naver.com/kin/09renewal/bg_main_cate_list.gif) repeat-y 149px 21px;}
.cate_view_all .cate_list li{float:left;width:136px;padding-left:15px;}
.cate_view_all .cate_list li h4{padding-bottom:14px;font-family:'나눔고딕';font-weight:bold;font-size:13px;letter-spacing:-0.1em;}
.cate_view_all .cate_list li ul{width:100%;background:none}
.cate_view_all .cate_list li ul li{padding:0 0 6px;}
.cate_view_all .cate_list li ul li a{color:#777}
.cate_view_all .cate_list li.right{width:135px;background:url(http://static.naver.com/kin/09renewal/bg_main_cate_list.gif) repeat-y 0px 21px;padding-bottom:10px}
.cate_view_all_open h3{border-bottom:1px solid #e0e0e0}
.cate_view_all_open h3 a span{background-position:0 -17px;}
.cate_view_all_open .cate_list{display:block}
/* //UI Object */
</style>
<!-- UI Object -->
<!-- [D] 전체보기 열면 cate_view_all_open 클래스가 추가되어야 함 -->
<div class="cate_view_all">
<h3><a href="#">카테고리 전체보기<span></span></a></h3>
<div class="cate_list">
<ul>
<li>
<h4>책상</h4>
<ul>
<li><a href="#">사무용책상(일자형)</a></li>
<li><a href="#">퍼즐형책상(ㄱ자형)</a></li>
<li><a href="#">중역용책상</a></li>
<li><a href="#">중역용책상(실속형)</a></li>
<li><a href="#">임원용책상</a></li>
<li><a href="#">유리/가죽디자인책상</a></li>
<li><a href="#">교육/학원/세미나책상</a></li>
<li><a href="#">컴퓨터책상</a></li>
<li><a href="#">이동서랍</a></li>
<li><a href="#">책상보조테이블</a></li>
<li><a href="#">가정용책상</a></li>
<li><a href="#">실험실/기숙사</a></li>
</ul>
</li>
<li>
<h4>의자</h4>
<ul>
<li><a href="#">사무용의자</a></li>
<li><a href="#">메쉬사무용의자</a></li>
<li><a href="#">중역용의자/실속형<br>(10만원대)</a></li>
<li><a href="#">중역용의자/고급형</a></li>
<li><a href="#">디자인사무용의자</a></li>
<li><a href="#">침대형의자</a></li>
<li><a href="#">로비/대기용 장의자</a></li>
<li><a href="#">연수/수강/접의자</a></li>
<li><a href="#">병원/진찰용환의자</a></li>
<li><a href="#">하이팩/보조/좌식의자</a></li>
<li><a href="#">회의용의자</a></li>
<li><a href="#">메쉬회의용의자</a></li>
<li><a href="#">중역회의용의자</a></li>
</ul>
</li>
<li>
<h4>책장</h4>
<ul>
<li><a href="#">OA책장[2/3/4/5/6단]</a></li>
<li><a href="#">고급형중역책장</a></li>
<li><a href="#">서재용책장</a></li>
<li><a href="#">OA락카장/사물함<br>(주문제작가능)</a></li>
<li><a href="#">철재락카/사물함</a></li>
<li><a href="#">철재디자인책장</a></li>
<li><a href="#">크레덴쟈/문갑</a></li>
</ul>
</li>
<li>
<h4>회의용테이블</h4>
<ul>
<li><a href="#">OA회의용테이블</a></li>
<li><a href="#">중역용테이블</a></li>
<li><a href="#">연결형테이블</a></li>
<li><a href="#">유리&가죽테이블</a></li>
<li><a href="#">학원&연수용테이블</a></li>
<li><a href="#">중역원형테이블</a></li>
<li><a href="#">OA원형테이블</a></li>
<li><a href="#">유리원형테이블</a></li>
</ul>
</li>
<li>
<h4>파티션</h4>
<ul>
<li><a href="#">45T기본형/스크린</a></li>
<li><a href="#">45/60T 고급형 파티션</a></li>
<li><a href="#">컬러우드파티션</a></li>
<li><a href="#">우드 파티션</a></li>
<li><a href="#">맥스 컬러파티션</a></li>
<li><a href="#">60T 블럭파티션</a></li>
<li><a href="#">65T 블럭파티션</a></li>
<li><a href="#">60T 블럭그릴 파티션</a></li>
<li><a href="#">60T 알류미늄 파티션</a></li>
<li><a href="#">30T 시트파티션</a></li>
<li><a href="#">아크릴 파티션</a></li>
<li><a href="#">목제 칸막이</a></li>
<li><a href="#">부품 및 기타</a></li>
<li><a href="#">파티션 색상표</a></li>
<li><a href="#">파티션 레이아웃</a></li>
</ul>
</li>
<li class="right">
<h4>인테리어</h4>
<ul>
<li><a href="#">인테리어 의자</a></li>
<li><a href="#">인테리어 소파</a></li>
<li><a href="#">보조/스툴디자인의자</a></li>
<li><a href="#">빠텐의자</a></li>
<li><a href="#">디자인테이블</a></li>
<li><a href="#">야외용가구</a></li>
</ul>
</li>
<li class="right">
<h4>옷장</h4>
<ul>
<li><a href="#">목제옷장</a></li>
<li><a href="#">철제옷장</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- //UI Object -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(function($){
$('h3>a').click(function(){
$('.cate_view_all').toggleClass('cate_view_all_open');
});
});
</script>
이 소스를 사용중입니다.
클릭시 전체메뉴가 내려오고 다시 클릭시 전체메뉴가 사라지고 있습니다.
그냥 마우스 오버시 메뉴가 열리고
마우스를 화면 다른곳에 가져가면 닫히게 하고 싶습니다.
답변 1
$("h3>a").on("mouseenter", function() {
$(".cate_view_all").addClass("cate_view_all_open");
});
$("div.cate_list").on("mouseleave", function() {
$(".cate_view_all").removeClass("cate_view_all_open");
});
이걸 jQuery(function($) {}); 이 안에 넣으시면 될 것 같네요.
감사합니다. 덕분에 바로 해결 했습니다. ^^
답변을 작성하시기 전에 로그인 해주세요.
