Проблема с плагином JQuery SuperSize с тегом привязки

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

Хорошо, в вашем коде есть две вещи, во-первых, у вас есть безумный отрицательный z-индекс на #supersized, автоматически вытягивающий все в нём тоже вниз ...

Вместо этого вы хотите, чтобы у #supersized был скромный z-индекс, тогда все, что нужно, чтобы подняться выше, становится немного выше ... Или ссылка будет заблокирована стандартными элементами, такими как body ...

Во-вторых, visibility:hidden проверяет, что ссылка не видна, и тоже блокирует ссылку ... afaik.

Вот твой код, css и js, подправленный, с рабочей ссылкой в ​​левой части примера внизу http://jsfiddle.net/sg3s/daeL3/

В качестве бонуса вот как я его отлаживал: если вы используете инспектор элементов либо в Firefox / Firebug, либо в Chrome, самый первый элемент, по которому вы можете непосредственно щелкнуть, будет верхним элементом. Таким образом, используя это, я смог определить, что тело блокирует ссылку. Во-вторых, так как я не могу непосредственно увидеть ссылку, я добавил в нее текст ... С небольшим эффектом, поэтому я выбрал ссылку и прошелся по ее стилям, и все родители исключили вещи, которые могут блокировать отображение ссылки. , сужая его до visibility: hidden

Кроме того, маленький js, разрезанный на конце, - это просто альтернативный способ убедиться, что то, что вы нажимаете, это то, что вы думаете ...