테스트 사이트 - 개발 중인 베타 버전입니다

자바스크립트 질문입니다. 마우스 온오버 채택완료

미스터고 9년 전 조회 1,996

</p><p> </p><p><style></p><p>/* UI Object */</p><p>/* Common */</p><p>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}</p><p>body,input,textarea,select,button,table{font-family:'돋움',Dotum,AppleGothic,sans-serif;font-size:12px}</p><p>img,fieldset{border:0}</p><p>ul,ol{list-style:none}</p><p>em,address{font-style:normal}</p><p>a{text-decoration:none}</p><p>a:hover,a:active,a:focus{text-decoration:underline}</p><p> </p><p>.cate_view_all{position:relative;width:959px;padding-top:3px;border-bottom:1px solid #c9c9c9;background:url(<a href="<a href="http://static.naver.com/kin/09renewal/bg_main_category.gif)" target="_blank" rel="noopener noreferrer">http://static.naver.com/kin/09renewal/bg_main_category.gif)</a>"><a href="http://static.naver.com/kin/09renewal/bg_main_category.gif)" target="_blank" rel="noopener noreferrer">http://static.naver.com/kin/09renewal/bg_main_category.gif)</a></a> repeat-x 0 0;margin:0 auto;} </p><p>.cate_view_all h3{border-right:1px solid #c9c9c9;border-left:1px solid #c9c9c9;font-size:11px}</p><p>.cate_view_all h3 a{display:block;position:relative;width:957px;height:24px;padding:15px 0 0 15px}</p><p>.cate_view_all h3 a span{display:block;position:absolute;top:12px;left:14px;width:103px;height:17px;background:url(<a href="<a href="http://static.naver.com/kin/09renewal/h_category_all.gif)" target="_blank" rel="noopener noreferrer">http://static.naver.com/kin/09renewal/h_category_all.gif)</a>"><a href="http://static.naver.com/kin/09renewal/h_category_all.gif)" target="_blank" rel="noopener noreferrer">http://static.naver.com/kin/09renewal/h_category_all.gif)</a></a> no-repeat;cursor:pointer;}</p><p>.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}</p><p>.cate_view_all .cate_list ul{overflow:hidden;clear:both;width:957px;background:url(<a href="<a href="http://static.naver.com/kin/09renewal/bg_main_cate_list.gif)" target="_blank" rel="noopener noreferrer">http://static.naver.com/kin/09renewal/bg_main_cate_list.gif)</a>"><a href="http://static.naver.com/kin/09renewal/bg_main_cate_list.gif)" target="_blank" rel="noopener noreferrer">http://static.naver.com/kin/09renewal/bg_main_cate_list.gif)</a></a> repeat-y 149px 21px;}</p><p>.cate_view_all .cate_list li{float:left;width:136px;padding-left:15px;}</p><p>.cate_view_all .cate_list li h4{padding-bottom:14px;font-family:'나눔고딕';font-weight:bold;font-size:13px;letter-spacing:-0.1em;}</p><p>.cate_view_all .cate_list li ul{width:100%;background:none}</p><p>.cate_view_all .cate_list li ul li{padding:0 0 6px;}</p><p>.cate_view_all .cate_list li ul li a{color:#777}</p><p>.cate_view_all .cate_list li.right{width:135px;background:url(<a href="<a href="http://static.naver.com/kin/09renewal/bg_main_cate_list.gif)" target="_blank" rel="noopener noreferrer">http://static.naver.com/kin/09renewal/bg_main_cate_list.gif)</a>"><a href="http://static.naver.com/kin/09renewal/bg_main_cate_list.gif)" target="_blank" rel="noopener noreferrer">http://static.naver.com/kin/09renewal/bg_main_cate_list.gif)</a></a> repeat-y 0px 21px;padding-bottom:10px}</p><p>.cate_view_all_open h3{border-bottom:1px solid #e0e0e0}</p><p>.cate_view_all_open h3 a span{background-position:0 -17px;}</p><p>.cate_view_all_open .cate_list{display:block}</p><p>/* //UI Object */</p><p></style></p><p> </p><p><!-- UI Object --></p><p><!-- [D] 전체보기 열면  cate_view_all_open 클래스가 추가되어야 함 --></p><p><div class="cate_view_all"></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><h3><a href="#">카테고리 전체보기<span></span></a></h3></p><p><span class="Apple-tab-span" style="white-space:pre">	</span><div class="cate_list"></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><ul></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><h4>책상</h4></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><ul></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">사무용책상(일자형)</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">퍼즐형책상(ㄱ자형)</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">중역용책상</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">중역용책상(실속형)</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">임원용책상</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">유리/가죽디자인책상</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">교육/학원/세미나책상</a></li>  </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">컴퓨터책상</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">이동서랍</a></li>  </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">책상보조테이블</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">가정용책상</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">실험실/기숙사</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span></ul></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></li></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><h4>의자</h4></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><ul></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">사무용의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">메쉬사무용의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">중역용의자/실속형
(10만원대)</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">중역용의자/고급형</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">디자인사무용의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">침대형의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">로비/대기용 장의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">연수/수강/접의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">병원/진찰용환의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">하이팩/보조/좌식의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">회의용의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">메쉬회의용의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">중역회의용의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span></ul></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><h4>책장</h4></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><ul></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">OA책장[2/3/4/5/6단]</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">고급형중역책장</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">서재용책장</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">OA락카장/사물함
(주문제작가능)</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">철재락카/사물함</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">철재디자인책장</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">크레덴쟈/문갑</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span></ul></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></li></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><h4>회의용테이블</h4></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><ul></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">OA회의용테이블</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">중역용테이블</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">연결형테이블</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">유리&가죽테이블</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">학원&연수용테이블</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">중역원형테이블</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">OA원형테이블</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">유리원형테이블</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span></ul></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></li></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><h4>파티션</h4></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><ul><span class="Apple-tab-span" style="white-space:pre">	</span></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">45T기본형/스크린</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">45/60T 고급형 파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">컬러우드파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">우드 파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">맥스 컬러파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">60T 블럭파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">65T 블럭파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">60T 블럭그릴 파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">60T 알류미늄 파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">30T 시트파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">아크릴 파티션</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">목제 칸막이</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">부품 및 기타</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">파티션 색상표</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">파티션 레이아웃</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span></ul></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></li></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><li class="right"></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><h4>인테리어</h4></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><ul><span class="Apple-tab-span" style="white-space:pre">	</span></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">인테리어 의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">인테리어 소파</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">보조/스툴디자인의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">빠텐의자</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">디자인테이블</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">야외용가구</a></li></p><p><span class="Apple-tab-span" style="white-space:pre">			</span></ul></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></li></p><p><span class="Apple-tab-span" style="white-space:pre">		</span><li class="right"></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><h4>옷장</h4></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><ul><span class="Apple-tab-span" style="white-space:pre">	</span></p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">목제옷장</a></li> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span><li><a href="#">철제옷장</a></li> </p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">			</span></ul></p><p><span class="Apple-tab-span" style="white-space:pre">		</span></li></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre">		</span></ul><span class="Apple-tab-span" style="white-space:pre">	</span></p><p><span class="Apple-tab-span" style="white-space:pre">	</span></div></p><p></div></p><p><!-- //UI Object --></p><p> </p><p><script type="text/javascript" src="<a href="<a href="http://code.jquery.com/jquery-latest.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.js</a>"><a href="http://code.jquery.com/jquery-latest.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-latest.js</a></a>"></script></p><p><script type="text/javascript"></p><p>jQuery(function($){</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>$('h3>a').click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre">		</span>$('.cate_view_all').toggleClass('cate_view_all_open');</p><p><span class="Apple-tab-span" style="white-space:pre">	</span>});</p><p>});</p><p></script></p><p> </p><p>

 

이 소스를 사용중입니다.

 

클릭시 전체메뉴가 내려오고 다시 클릭시 전체메뉴가 사라지고 있습니다.

 

그냥 마우스 오버시 메뉴가 열리고

 

마우스를 화면 다른곳에 가져가면 닫히게 하고 싶습니다.

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

</p><p>$("h3>a").on("mouseenter", function() {
   $(".cate_view_all").addClass("cate_view_all_open");
});</p><p> </p><p>$("div.cate_list").on("mouseleave", function() {
   $(".cate_view_all").removeClass("cate_view_all_open");
});</p><p>

이걸 jQuery(function($) {}); 이 안에 넣으시면 될 것 같네요. 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

미스터고
9년 전
감사합니다. 덕분에 바로 해결 했습니다. ^^

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인