마우스 오버시 div 레이어 보이게 하는 거 좀 봐 주세요. (2번째 ㅠㅠ)
본문
<!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;
}
#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">
$(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>
< 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>
===============================================================================
아래에 질문해서 얻은 제이쿼리 소스 입니다.
제가 여기에서 hover를 사용 해 봤는데... 안되더라구요.
