Добавление слоя div поверх карусели jquery. Крепкий орешек

Question

У меня сложный вопрос, ну, это тяжело для меня, потому что я в некотором роде новичок во всей карусели jQuery, никогда не создавал его до этого проекта.

Вот моя проблема.

Если вы зайдете на ТЕСТ-САЙТ , вы увидите скроллер с синим фоном примерно на полпути вниз по странице. Если вы наведите указатель мыши на слайд «Аналитика данных», вы увидите появление черного ящика.

Вот моя дилемма. Я хочу, чтобы этот черный ящик был меню, которое связано со слайдом аналитики данных. Я сделал макет для тебя, чтобы ты понял, о чем я говорю.

Вот мой код скроллера. Я использую jCarousel.

 <div class="carousel">

 <ul>
     <li>
          <div id="homeslide1">
     testers sdfasdfasdfas asdftjhs iasndkad kasdnf
     <a href="#" id="#homeslide1-toggle">Close this</a>  </div>  
     <a href="#" id="homeslide1-show"><img src="<?php bloginfo('template_url'); ?>/images/home_data_analytics.jpg" width="200" height="94" /></a>


     </li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_oem_partnerships.jpg" width="200" height="94" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_reporting.jpg" width="200" height="92" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_returning_lost_customers.jpg" width="200" height="92" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_sales.jpg" width="200" height="92" /></li>
     <li><img src="<?php bloginfo('template_url'); ?>/images/home_service_retention.jpg" width="200" height="92" /></li>
  </ul>

Вот мой скроллер css

 /*HOMEPAGE SCROLLER*/
  .carousel {!important padding:10px; width: 890px; margin: 0px 0px 0px 26px;}
  .carousel ul li element.style{height: 94px;}
.carousel ul{width: 200px; padding: 5px;}
.carouselitem{height: 94px;}
.prev{background: url(images/home_left_scroll.png); height: 94px; width: 16px; text-indent: -999px; outline: none; cursor:pointer; float: left;}
.next{background: url(images/home_right_scroll.png); height: 94px; width: 16px; text-indent: -999px; outline: none; cursor:pointer; float: right;}
.carousel ul li{ padding: 0px 3px 0px 3px; margin: 0px; height:!important 94px;
}
.home_right_arrow{
     width: 16px;
     float: right;}
    .home_left_arrow{
     width: 16px;
     float: left;}
.homeslide1{
    width: 200px;
    height: 94px;}

Я перепробовал всевозможные трюки с z-индексами, но, похоже, не могу понять это самостоятельно. Если вы решите эту загадку, я куплю вам пиво, если мы когда-нибудь встретимся. Я также дам вам пять баллов через Интернет.

Есть ли простой способ сделать это через jQuery? Если так, то не могли бы вы указать мне правильное направление?

Большое спасибо.

Answer 1

Я собирался сделать пример, используя ваш сайт, но код слишком сложен для навигации.В общем, вам просто нужно получить позицию связующего элемента с смещением , а затем использовать его для установки смещения меню.Так что да, используйте абсолютное позиционирование;это, безусловно, самый простой способ, которым это будет работать.Вам также может понадобиться заполнить все пространство a, сделав его display: block; и задав его размеры.

Вот пример .Делая это, я обнаружил, что по какой-то причине смещение было применено относительно старого местоположения, когда оно использовалось более одного раза.Я не могу объяснить почему, но использование .css(left: x, top: y) вместо этого для установки местоположения сработало.