Hinzufügen einer Div-Ebene über einem Jquery-Karussell. Tough one

Question

Ich habe eine harte, aber es ist hart für mich, weil ich ein bisschen neu in der ganzen jQuery Karussell Sache bin, nie eine vor diesem Projekt gebaut.

Hier ist mein Problem.

Wenn Sie zum TEST SITE gehen, sehen Sie einen Farbwechsler mit blauem Hintergrund etwa auf halber Höhe der Seite. Wenn Sie die Maus auf die Folie "Datenanalyse" bewegen, sollten Sie eine Blackbox einblenden.

Hier ist mein Dilemma. Ich möchte, dass diese Blackbox ein Menü ist, das mit der Datenanalysefolie verbunden ist. Ich habe ein Mock-up für dich gemacht, damit du sehen kannst, worüber ich rede.

Hier ist mein scroller Code. Ich benutze 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> 

Hier ist meine scroller 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;} 

ich alle möglichen z-index Tricks versucht haben, aber kann nicht scheinen, es auf eigene Faust herauszufinden. Wenn du dieses Rätsel löst, kaufe ich dir ein Bier, wenn wir uns jemals treffen. Ich gebe dir auch eine High Five über das Internet.

Gibt es eine einfache Möglichkeit, dies über jQuery zu tun? Wenn ja, könntest du mich in die richtige Richtung weisen?

Vielen Dank.

Answer 1

Ich wollte ein Beispiel mit Ihrer Website machen, aber der Code ist zu schwer zu navigieren. Sie müssen also nur die Position des Verknüpfungselements mit offset ermitteln und dann den Offset des Menüs festlegen. Also ja, benutze absolute Positionierung; es ist bei weitem der einfachste Weg, dies wird funktionieren. Sie müssen möglicherweise auch Ihre a füllen den gesamten Raum, indem Sie es display: block; machen und seine Abmessungen festlegen.

Hier ist an example. Als ich es gemacht habe, habe ich festgestellt, dass der Offset aus irgendeinem Grund relativ zur alten Position angewendet wurde, wenn er mehr als einmal verwendet wurde. Ich kann nicht erklären, warum, aber mit .css(left: x, top: y) stattdessen für die Einstellung der Position gearbeitet.