在jquery转盘的顶部添加一个div层。硬汉

我有一个很难的，嗯，对我来说很难，因为我对整个jQuery carousel有点陌生，在这个项目之前从未构建过一个

这是我的问题

如果你转到，你会看到一个蓝色背景的滚动条，大约在页面的一半。如果你把鼠标放在“数据分析”幻灯片上，你会看到一个黑匣子逐渐消失

这是我的困境。我希望那个黑匣子是一个连接到数据分析幻灯片的菜单。我为你做了一个模型，这样你就可以看到我在说什么了

这是我的滚动代码。我在用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>

我尝试过各种z索引技巧，但似乎无法独自解决。如果你解开这个谜，如果我们再见面，我就请你喝杯啤酒。我也会通过互联网给你打个高五

有没有一种简单的方法可以通过jQuery实现这一点？如果是的话，你能给我指出正确的方向吗

---

非常感谢。

我打算用你的网站做一个例子，但是代码太难导航了。所以基本上，你只需要得到链接元素的位置，然后用它来设置菜单的偏移量。所以是的，使用绝对定位；这是目前为止最简单的方法。您可能还需要通过使

显示：block，使
a
填满整个空间并设置其尺寸

给你。在制作时，我发现由于某种原因，在多次使用时，相对于旧位置应用了偏移量。我无法解释原因，但使用
.css（左：x，上：y）
来设置位置是有效的。
可能是一个通用的绝对定位问题->如果你只从左到右做x像素…taht的问题是它没有附加到幻灯片上。每张幻灯片都会有一个这样的div，所以我不认为绝对位置会起作用。当它从屏幕上滚动时，你想发生什么？你想让它在正常滚动时与幻灯片一起滚动吗？@crimson它将在鼠标悬停时打开，在鼠标悬停时淡出，所以它不会保持打开状态。好吧，这样会更容易！谢谢你，我的朋友。我试试这个，看看是否有效。我以前从未使用过offset，所以我希望我能理解它并完成这个项目：）再次感谢！整个上午都在试，但还是没能成功。你知道我在哪里可以找到一个例子吗？也许这会帮助我更深入地思考这个问题。
 /*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;}