jQueryカルーセルの上にdivレイヤーを追加しています。タフな1つ

Question

私は厳しいものを持っています。私はjQueryカルーセル全体にちょっと新しくて、このプロジェクトの前に作ったことがないので、私にとっては難しいです。

ここに私の問題があります。

TEST SITEに行くと、ページの下半分の青い背景のスクロールバーが表示されます。 「データ解析」スライドにマウスを合わせると、ブラックボックスがフェードインします。

ここは私のジレンマです。そのブラックボックスをデータアナリティクススライドに接続されたメニューにしたいと思います。私はあなたのためにモックをやったので、私が何を話しているか見ることができます。

は、ここに私のスクロールコードです。私は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インデックストリックのすべての種類を試してみたが、自分でそれを把握するように見えることはできません。あなたがこの謎を解くなら、私たちが一度会うと私はあなたにビールを買うでしょう。私はまた、あなたにインターネット経由でハイ5を与えます。

jQueryを使用してこれを行う簡単な方法はありますか？もしそうなら、正しい方向に私を向けることができますか？

ありがとうございます。

Answer 1

あなたのサイトを使ってサンプルを作成しようとしましたが、コードをナビゲートするのは難しいです。基本的には、連結要素の位置をoffsetで取得し、それを使ってメニューのオフセットを設定するだけです。だから、絶対配置を使用してください。これはこれがはるかに簡単な方法です。 display: block;とその寸法を設定することによって、aを全体のスペースをいっぱいにする必要があるかもしれません。

ここにはan exampleです。それを作るとき、何らかの理由でオフセットが2回以上使用されたときに古い場所に対して相対的に適用されていることがわかりました。私は理由を説明することはできませんが、場所を設定する代わりに.css(left: x, top: y)を使用しています。