Question

我使用jquery图像悬停在我的网站上。在样式标签中它有2个绝对位置。我希望在图像滑块之后和3box之前显示我的图像，但是当我运行该网站时，我受影响的图像位于3个方框上。该演示位于以下链接： http://rogatech.somee.com/ 我的第二个问题是悬停图像的位置随着放大或缩小而变化。我的代码：

<style type="text/css">
    #cont {
        text-align: center;
        padding:auto;
       position:inherit;
        width: 970px;
    }

.img
{
    position:absolute;
    z-index:0;
}
    .end {
        margin-right: 0;
    }
    .clear {
        clear: both;
    }
    .img a img {
        position: relative;
        border: 0 solid #fff;
    }
</style>

和：

<div class="img"><a href="#">
<img src="aksLink/Untitled-4.png" style=" margin:0 1px; width:135px; height:135px  " />
</a></div>
<div class="img">
<a href="#">
<img src="aksLink/Untitled-5.png"  style=" margin:0 1px ; width:135px; height:135px " />
</a></div>
<div class="img">
<a href="#">
<img src="aksLink/Untitled-3.png"  style=" margin:0 1px ; width:135px; height:135px " />
</a></div>

<div class="img"><a href="#">
<img src="aksLink/Untitled-6.png" style=" margin:0 1px ; width:135px; height:135px " />
</a> </div><div class="clear"></div></div>
 <script type="text/javascript">
     $(document).ready(function () {
         var cont_left = $("#cont").position().left;
         $("a img").hover(function () {
             // hover in
             $(this).parent().parent().css("z-index", 1);
             $(this).animate({
                 height: "250",
                 width: "250",
                 left: "-=50",
                 top: "-=50"
             }, "fast");
         }, function () {
             // hover out
             $(this).parent().parent().css("z-index", 0);
             $(this).animate({
                 height: "150",
                 width: "150",
                 left: "+=50",
                 top: "+=50"
             }, "fast");
         });

         $(".img").each(function (index) {
             var left = (index * 160) + cont_left;
             $(this).css("left", left + "px");
         });
     });
        </script>

Answer 1

最后我通过这个改变解决了我的问题：

   <style type="text/css">
        #cont {
            text-align: center;
            position:absolute;
         left: 30px;
            width: 970px;



        }

    .img
    {
        position:absolute;
        z-index:0;


    }
        .end {

        }

        .clear {
            clear: both;
        }
        .img a img {
            position: relative;
            border: 0 solid #fff;
        }
    </style>

和

<div style=" position:relative ">
  <div id="cont" style="">
   <div class="img">
     <a href="#">
<img src="aksLink/Untitled-1.png" style="  width:135px; height:135px " />
</a></div>
<div class="img">
       <a href="#">
<img src="aksLink/Untitled-2.png"  style="  width:135px; height:135px  " />
</a></div>

<div class="img"><a href="#">
<img src="aksLink/Untitled-4.png" style="  width:135px; height:135px  " />
</a></div>
<div class="img">
<a href="#">
<img src="aksLink/Untitled-5.png"  style="  width:135px; height:135px " />
</a></div>
<div class="img">
<a href="#">
<img src="aksLink/Untitled-3.png"  style=" width:135px; height:135px " />
</a></div>

<div class="img end"><a href="#">
<img src="aksLink/Untitled-6.png" style=" width:135px; height:135px " />
</a> </div><div class="clear"></div></div><br /><br /><br/>
 <script type="text/javascript">
     $(document).ready(function () {
         var cont_left = $("#cont").position().left;
         $("a img").hover(function () {
             // hover in
             $(this).parent().parent().css("z-index", 1);
             $(this).animate({
                 height: "250",
                 width: "250",
                 left: "-=50",
                 top: "-=60"
             }, "fast");
         }, function () {
             // hover out
             $(this).parent().parent().css("z-index", 0);
             $(this).animate({
                 height: "135",
                 width: "135",
                 left: "+=50",
                 top: "+=60"
             }, "fast");
         });

         $(".img").each(function (index) {
             var left = (index * 140) + cont_left;
             $(this).css("left", left + "px");
         });
     });
        </script>
</div>

问题在css中的位置

1 个答案: