具有锚标记的JQuery超大型插件问题

Question

我目前正在将Supersized插件用于JQuery，并且遇到横幅无法点击的锚标记的问题。

我将Supersized附加到div标签而不是body标签上。

我将“ #supersized”和“ #supersized li”设置为绝对位置，以正确地包含在包含div中。 但是，当当锚链接不会覆盖在图像上，而是可以单击的。 我尝试将z-index增大到90。

我已经尝试了所有我知道的东西，但是仍然无法正常工作。 我在锚标记周围放置了一个边框，它将图像向下推，但是无法点击。

的CSS

img { border:none; }

#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}

  #supersized {  display:block; position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
  #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
  #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
  #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }         /*Quality*/

  #supersized li { display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
  #supersized a { width:100%; height:100%; display:block; }
     #supersized li.prevslide { z-index:-20; }
     #supersized li.activeslide { z-index:-10; }
     #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
        #supersized li.image-loading img{ visibility:hidden; }
     #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

的JavaScript

<script type="text/javascript">

     jQuery(function($){

        $.supersized({

           // Functionality
           slide_interval           :   3000,      // Length between transitions
           transition                 :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
           transition_speed      :   700,      // Speed of transition

           // Options
           fit_always                 :    0,
           fit_portrait                 :    0,
           horizontal_center     :    1,
           slide_links                :    'blank',   // Individual links for each slide (Options: false, 'number', 'name', 'blank')
           vertical_center         :    1,

           slides  :     [ 
                       {image : 'images/homepageBanners/banner1.jpg', title : 'Banner 1', url : "http://www.yahoo.com"},
                       {image : 'images/homepageBanners/banner2.jpg', title : 'Banner 2', url : "http://www.yahoo.com"},
                       {image : 'images/homepageBanners/banner3.jpg', title : 'Banner 3', url : "http://www.yahoo.com"},
                       {image : 'images/homepageBanners/banner4.jpg', title : 'Banner 4', url : "http://www.yahoo.com"}
                    ]
        });
      });

</script>

HTML是页面包装中包含的简单div标签。 我更改了Supersized滑块的输出，以便将其附加到div标签而不是body标签。

<div id="HomePageBanners"></div>

加大号中的javascript已更改为追加到上述div标签：

$(document).ready(function() {
     $('#HomePageBanners').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
});

Answer 1

好的，您的代码有2件事情出错，首先您在#supersized上有一个疯狂的负z索引，它#supersized自动将其中的所有内容#supersized底部...

相反，您要执行的操作是#supersized具有适度的z-index，然后需要超出该值的所有内容都会稍高一点...否则该链接将被body等标准元素阻止...

其次， visibility:hidden确保链接不可见，并且也会阻止href ... afaik。

使用以下示例区域中的工作链接对以下代码，css和js进行了调整：左下角http://jsfiddle.net/sg3s/daeL3/

作为奖励，这里介绍了我如何调试它：如果在firefox / firebug或chrome中使用元素检查器，则可以直接单击的第一个元素将是顶部元素。 因此，使用该链接，我可以确定主体正在阻止链接。 其次，由于我无法直接看到该链接，因此在其中添加了一些文本...影响不大，因此我选择了该链接，并逐步解决了其样式，所有父母消除了会阻塞链接显示的内容，将其范围缩小到visibility: hidden

另外，在末端剪下的小js只是确保您单击的内容是您认为的真实内容的另一种方法...