Question

我目前正在使用JQuery的Supersized插件，我遇到了锚点标签的问题，因为横幅不可点击。

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

我将“#supersized”和“#supersized li”设置为绝对位置以适合包含div。但是那个dang锚链接不会覆盖图像并且可以点击。我已经尝试将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

好的，你的代码有两个问题，首先你在#supersized上有一个疯狂的否定z-index，自动将其中的所有内容都拉到底部......

你要做的是让#supersized有一个适度的z-index，然后需要高于它的所有东西都会高一个...或者链接将被身体等标准元素阻挡......

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

继承你的代码，css和js，调整，示例区域左下方的工作链接http://jsfiddle.net/sg3s/daeL3/

作为奖励继续我如何调试它：如果你在firefox / firebug或chrome中使用元素检查器，你可以直接点击的第一个元素将是顶部元素。所以使用它我能够确定身体阻止链接。其次，因为我无法直接看到链接，我在其中添加了一些文字...效果不大所以我选择了链接并通过它的风格和所有父母消除了阻止链接显示的东西，将其缩小到visibility: hidden

此外，最后剪掉的小js只是另一种方法，可以确保你点击的内容是你认为的......

带锚标记的JQuery Supersized插件问题

1 个答案: