0

CSSでリモートロールオーバーを作りたいのですが、添付画像のように変な隙間とズレが出来てしまいます。
ぴったりくっつけるには、どこを直したらいいのでしょうか？(>_<) <div id="wrapper">
<div id="visual_main">
<div class="stage">
<img src="#" width="450" height="260" alt="main" />
<!-- // stage --></div>

<ul class="cf">
<li>
<a href="#">
<img src="#" width="112" height="60" alt="main1_a" border="0">
<span><img src="" alt="main1" width="450" height="260"></span>
</a>
</li>
<li>
<a href="#">
<img src="#" width="112" height="60" alt="main2_a" border="0">
<span><img src="" alt="main2" width="450" height="260"></span>
</a>
</li>
<li>
<a href="#">
<img src="#" width="112" height="60" alt="main3_a" border="0">
<span><img src="" alt="main3" width="450" height="260"></span>
</a>
</li>
<li>
<a href="#">
<img src="#" width="112" height="60" alt="main4_a" border="0">
<span><img src="" alt="main4" width="450" height="260"></span>
</a>
</li>
</ul>
<!-- // #visual_main --></div>
<!-- // #wrapper --></div>

<style type="text/css">

#visual_main{position: relative;}

#visual_main img{display:block;}

#visual_main a span{display: none;}

#visual_main a:link,
#visual_main a:visited,
#visual_main a:hover,
#visual_main a:active{display:block;}

#visual_main a img{width: 112px; height: 60px;}

#visual_main a:hover span{display:block; position:absolute; top:0; left:0;}

#visual_main a:hover span img{width: 450px; height: 260px;}

#visual_main li{width:112px; height:60px; float:left;}

</style>

質問者が選んだベストソリューション

Yahoo!知恵袋 4615日前