마우스 오버시 div 레이어 보이게 하는 거 좀 봐 주세요.
본문
제가 인터넷에서 자료를 찾아 소스를 만들어 봤는데...
주 목적인 메인메뉴에 마우스 오버를 하면 서브메뉴(각 메뉴별 상품)가 나오는 소스입니다.
그런데 마우스 오버시 레이어가 안 나타 나네요.
뭐가 잘못 된 것일까요?
===============================================================================
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>전체메뉴 설정</title>
<style type="text/css">
#hiddenmenudivout {
position:absolute;
margin-left:50%;
width:100%;
height:100%;
}
#hiddenmenudiv ul {
list-style-type: none;
line-height: 160%;
}
#hiddenmenudiv {
position:relative;
margin-top:1px;
margin-left:-470px;
width:700px;
height:500px;
display: none;
z-index:99999;
background-color:#fff;
}
#allmenuimg {
cursor:pointer;
}
.menuFirst {
width:170px;
height:60px;
background-color:#f9f9f9;
border-right:1px solid #e1e1e1;
border-bottom:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
cursor:pointer;
}
.menuFirst span{
font-size:15px;
margin-left:20px;
margin-top:15px;
}
.menuFirstimg {
width:170px;
height:56px;
border-right:1px solid #e1e1e1;
border-bottom:1px solid #e1e1e1;
border-left:1px solid #e1e1e1;
}
.menu01 {
}
.menu02 {
}
.menu03 {
}
.menu04 {
}
#submenu_0 {
position:relative;
margin-top:-450px;
margin-left:-280px;
width:300px;
z-index:99999;
display: none;
}
#submenu_1 {
position:relative;
margin-top:-450px;
margin-left:-280px;
width:300px;
z-index:99999;
display: none;
}
#submenu_2 {
position:relative;
margin-top:-450px;
margin-left:-280px;
width:300px;
z-index:99999;
display: none;
}
#submenu_3 {
position:relative;
margin-top:-450px;
margin-left:-280px;
width:300px;
z-index:99999;
display: none;
}
</style>
<script language="javascript" src="/mall/js/jquery-1.7.2.min.js"></script>
<!-- <script src="//code.jquery.com/jquery.min.js"></script> -->
<script type="text/javascript">
$("#hiddenmenudiv").each(function(index) {
$(index).mouseover(function() {
$("#submenu_" + index).css("display", "block");
});
$(index).mouseout(function() {
$("#submenu_" + index).css("display", "none");
});
});
</script>
<script>
$(function() {
$("#allmenuimg").on("click", function() {
// id가 "divBox"인 요소를 1초에 걸쳐 점점 나타나게 하거나 사라지게 함.
$("#hiddenmenudiv").fadeToggle(1000);
//$("#hiddenmenudiv").slideToggle("fast");
});
});
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="overflow-x:hidden;" tracingsrc="img/top_egg.jpg" tracingopacity="100">
<table background="/mall/img/egg_1.gif" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="/mall/img/all_product.jpg" width="118" id="allmenuimg" height="47" border="0"></td>
<td align="center"><img src="/mall/img/menu_line.jpg" width="2" height="18" border="0"></a></td>
<td align="center"><a href="/mall/m_mall_list.php?ps_ctid=07000000"><img src="/mall/img/hot_week.jpg" width="104" height="47" border="0"></a></td>
<td align="center"><img src="/mall/img/menu_line.jpg" width="2" height="18" border="0"></td>
<td align="center"><a href="/mall/m_mall_list.php?ps_ctid=02000000"><img src="/mall/img/best_product.jpg" width="121" height="47" border="0"></a></td>
<td align="center"><img src="/mall/img/menu_line.jpg" width="2" height="18" border="0"></td>
<td align="center"><a href="/mall/m_mall_list.php?ps_ctid=03000000"><img src="/mall/img/one_product.jpg" width="114" height="47" border="0"></a></td>
<td align="center"><img src="/mall/img/menu_line.jpg" width="2" height="18" border="0"></td>
<td align="center"><a href="/mall/m_board.php?ps_db=new_event"><img src="/mall/img/event_bt.jpg" width="97" height="47" border="0"></a></td>
<td align="center"><img src="/mall/img/menu_line.jpg" width="2" height="18" border="0"></td>
<td align="center"><a href="/mall/m_board.php?ps_db=review"><img src="/mall/img/real.jpg" width="98" height="47" border="0"></a></td>
<td align="center"><img src="/mall/img/menu_line.jpg" width="2" height="18" border="0"></td>
<td align="center"><a href="/mall/m_customer.php"><img src="/mall/img/guest_center.jpg" width="93" height="47" border="0"></a></td>
<td align="center"><img src="/mall/img/menu_line.jpg" width="2" height="18" border="0"></td>
</tr>
</table>
</td>
</tr>
</table>
<div id="hiddenmenudivout">
<div id="hiddenmenudiv">
<div class="menuFirstimg"><img src="/mall/img/allmenu.jpg" width="170" height="56" border="0"></div>
<div class="menuFirst"><span>자연그대로 담은</span></div>
<div class="menuFirst"><span>의성발효흑마늘</span></div>
<div class="menuFirst"><span>의성생마늘</span></div>
<div class="menuFirst"><span>의성정통고추장</span></div>
</div>
<div id="submenu_0">
자연그대로 호박즙<br>자연그대로 가시오가피<br>자연그대로 구기자즙<br>자연그대로 닭의장풀즙<br>자연그대로 돌미나리즙<br>자연그대로 민들레즙<br>자연그대로 머루과즙<br>자연그대로 배과즙<br>자연그대로 사과과즙<br>자연그대로 쇠비름즙<br>자연그대로 쑥즙<br>자연그대로 아카시아꽃즙<br>자연그대로 양파즙<br>자연그대로 익모초즙<br>자연그대로 인진쑥즙<br>자연그대로 작약즙<br>자연그대로 질갱이즙<br>자연그대로 칡즙<br>자연그대로 포도과즙<br>자연그대로 헛개즙<br> </div>
<div id="submenu_1">
의성 발효 흑마늘 농축액<br>발효 도라지 농축액<br>의성 발효 흑마늘 흑염소<br>발효 인진쑥 프리미엄 농축액<br>의성 발효 흑마늘 환<br>의성 발효 흑마늘 미용비누<br> </div>
<div id="submenu_2">
의성다진마늘 1kg<br>의성다진마늘 300g<br>의성토종깐마늘 200g<br>의성토종마늘 1.5kg<br>의성토종마늘 1kg<br> </div>
<div id="submenu_3">
고추장선물세트3호(사과고추장500g,마늘고추장500g)<br>의성마늘고추장 선물세트(유리병) 500g*3개<br>의성마늘고추장 선물세트(유리병) 250g*3개<br>의성마늘고추장 1kg<br>의성마늘고추장 500g<br>고추장선물세트1호(마늘고추장1kg X 2개)<br>의성마늘고추장 14kg<br>고추장선물세트2호(마늘고추장500g X 2개<br>의성마늘고추장 3kg<br>고추장선물세트2호(사과고추장1kg,마늘고추장1kg)<br>고추장선물세트1호(사과고추장500g,마늘고추장500g)<br>의성마늘고추장 500g<br>의성마늘고추장 1kg<br>의성사과고추장 1kg<br>의성사과고추장 500g<br> </div>
</div>
</body>
</html>
===============================================================================
hiddenmenudivout 는 제일 바깥 레이어이구요.
hiddenmenudiv 메인메뉴 위치부분.
menuFirst 메인 메뉴 글자부분이구요.
submenu_0 ~ submenu_3 는 서브메뉴(각 카테고리별 상품 나오는 레이어) 위치 입니다.
왜 안될까요? ㅠㅠ
혼자 안되어 도움을 청해 봅니다.
읽어주셔서 감사합니다.
답변 2
해당 내용을 다음 처럼 바꿔보세요.
<script type="text/javascript">
$(function() {
$("#hiddenmenudiv div").not("div:first").each(function(index,item) {
$(item).mouseover(function() {
$("#submenu_" + index).css("display", "block");
});
$(item).mouseout(function() {
$("#submenu_" + index).css("display", "none");
});
});
});
</script>
each 로 이벤트를 주지 마시고, class로 이벤트를 주시면 더 편할것같은데요.
data 에 인덱스 값 넣어서 data별 맞는 div 찾아서 띄워주시면 될것같아요