질문이에요~ ㅠ 고수분들 제발 도와주세요~
본문
http://eunadmin.cafe24.com/gingerkorea/ginger.php
현재 작업하고 있는데요~^^
맨위에 home을 누르면 일러로 된 페이지가 있는데
토끼와 사슴 각각png파일과 분홍색 배경을 absolute 로 겹쳐 놓았습니다.
배경위에 사슴 그리고 그위에 테두리 꽃 그위에 토끼 이런상태입니다~
그런데 토끼와 사슴에 hover를 하면 위로 50px정도 움직이는 모션을 주고 a링크를 걸고싶은데
이렇게 이미지를 겹쳐놓았더니 a링크,태그가 걸리지가 않아요 ㅜㅜ
a링크 걸어서 사슴이나 토끼 클릭시 페이지 이동하고 싶은데 도와주세요 ㅜㅜㅜㅜ
<소스>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name = "keywords" content = "SMINT jQuery Plugin, SMINT, jQuery Plugin, One Page Website, Sticky Navigation" />
<meta name = "description" content = "SMINT is a simple plugin for lovers of one page websites, which helps with sticky menus and page scrolling." />
<meta name="viewport" content="width=device-width">
<link href="demo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery.smint.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
</head>
<body>
<div class="wrap ">
<div class="section sTop">
<div class="inner">
<div class="title"><img src="Logo-GINGER.jpg" ></div>
<h2 class="subtitle" style="text-align:center;padding-right:10px;">A Full-blown Lifestyle Concept Brand</h2>
</div>
</div>
<div class="subMenu" >
<div class="inner">
<a href="#sTop" class="subNavBtn2" style="background-image:url(http://eunadmin.cafe24.com/gingerkorea/logomini.jpg)">
</a>
<a href="#s1" class="subNavBtn" >HOME<p>GO TO TOP</p></a>
<a href="#s2" class="subNavBtn">COMPANY<p>INTRODUCE</p></a>
<a href="#s3" class="subNavBtn">STORE INFO<p>STORE MAP </p></a>
<a href="#s4" class="subNavBtn">COMMUNITY<p>Q&A BOARD </p></a>
<a href="https://www.naver.com" class="subNavBtn extLink end">CADALOG<p>GO TO SITE</p></a>
</div>
</div>
<div class="section s1" >
<div style="width:100%;height:100%;">
<img src="bgbg.jpg" style="width:100%;height:100%;z-index:1;position:absolute;top:0;">
<img src="bg2.png" style="width:100%;height:100%;z-index:3;position:absolute;top:0;">
<a href="#"><img src="cow.png" style="z-index:2;"></a>
<img src="rabbit.png" style="z-index:3;position:absolute;top:260px;right:10px;">
</div>
</div>
<div class="section s2" style="postion:absolute;top:-14px;">
<div style="width:100%;height:221px;"><img src="bannerbg2.jpg" style="z-index:1;position:absolute;top:0;width:100%;"></div>
<p style="width:851px;margin:0 auto;"><img src="main_banner2.png" style="z-index:2;position:absolute;top:0;width:851px;margin-top:12px;"></p>
<div style="width:996px;height:392px;margin:10px auto;">
<img src="main_banner2.jpg" style="float:left;">
</div>
</div>
<div class="section s3" style="postion:absolute;top:-14px;">
<div class="inner">
<h1>매장소개223</h1>
</div>
</div>
<div class="section s4" style="postion:absolute;top:-14px;">
<div class="inner">
<iframe src="http://eunadmin.cafe24.com/bbs/board.php?bo_table=ginger" width="100" height="100" frameborder="0"></iframe>
</div>
</div>
<div class="section s5" >
<div class="inner">
<h1>Section 5</h1>
</div>
</div>
</div>
</body>
</html>
){kind=link}