jQuery Cycle: ссылки внутри циклического div перекрывают друг друга? - PullRequest
Новая
       4

jQuery Cycle: ссылки внутри циклического div перекрывают друг друга?

2 голосов
/ 30 июля 2010

Редактировать: Я понял это.Плагин jQuery Cycle добавляет z-index к каждому элементу, через который он работает, таким образом, первый элемент всегда имел самый высокий z-index, путая все ссылки.Удаление функциональности z-index из плагина исправило это.

Привет,

В настоящее время я создаю циклический div с использованием цикла jQuery, который имеет несколько внутренних ссылок.По сути, у нас есть большой баннер, а затем внутри этого большого баннера у меня есть несколько абсолютных позиционных элементов, содержащих продукт, миниатюру к видео и т. Д. У меня также есть настраиваемая страница.

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

Вотосновы моего кода, чтобы лучше выложить его.Я также обрисовал свои места размещения, как в ответе на ответ ниже. 

    #rotation {
         position: relative;
    }

     .rotation_item {
         position: relative;
     }

     .rotation_box {
         position: relative;
     }

<div id="rotation">
<div id="rotation_container">
      <div class="rotation_item" style="background: url('/some/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/product.jpg' />
                <h3><a href='/product/page/'>Some Cool Product!</a></h3>
             </div>
      </div> 
      <div class="rotation_item" style="background: url('/some/other/background.jpg');">
             <div class="rotation_box">
                <img src='/image/for/other/product.jpg' />
                <h3><a href='/product/page_other/'>Some Other Cool Product!</a></h3>
             </div>
      </div> 
</div>
</div>

В этом сценарии единственная ссылка, которая всегда отображается при нажатии, - /product/page/

Я надеюсь,это имеет смысл, кто-нибудь знает, как я могу предотвратить это, используя пакет jQuery Cycle, или, может быть, какие-то забавные настройки CSS для каждого элемента direction_item?

Ответы [ 2 ]

3 голосов
/ 30 марта 2011

У меня была ТОЧНАЯ та же проблема с плагином Cycle Lite, и он сводил меня с ума ... но даже удаление z-индекса из плагина не помогло мне в конкретной ситуации (мой внутренний HTML-слайд немного сложнеечем то, что вы опубликовали выше).

Очевидно, есть некоторые логические различия между плагином Cycle Lite (который включает в себя только переход затухания) и полным плагином "Cycle All".

В основном решениев итоге установил плагин Cycle All.Это технически излишне, но у меня наконец-то появилось затухающее слайд-шоу с отдельными ссылками на каждое изображение, без необходимости что-либо взламывать.

1 голос
/ 30 июля 2010

Я полагаю, что ваши ссылки расположены относительно rotation_container, а не rotation_item, и поэтому находятся в заданном положении. Если вы этого еще не сделали, попробуйте добавить position: relative в CSS для ваших rotation_item элементов - это вполне может решить вашу проблему.

...