Jquery 帮我定位css

我熟悉html和css，但不擅长css定位。这里是总体思路。假设我有一个图像链接，当我在链接中悬停时，我需要显示一个div，在那里我将显示项目的一些信息。我知道这应该通过绝对定位来完成。但这对我不起作用。让我展示一下设计：

到目前为止，你可以在这里看到我的工作：

这是Html。我已经显示了一个项目的代码。悬停预览将是悬停时应显示的整个div。我现在不介意悬停效果，因为我将通过javascript实现它。请帮助我如何正确显示div

<ul id="featured_classifields">
                    <div id="fcf_wraper">    

<li>
                        <a href="#"><img src="images/temp/featured-thumb.png" title="" alt="" width="135" height="90" /></a>
                            <div class="hover_preview">
                                <div class="hover_preview_main">
                                </div>
                                <div class="hover_preview_arrow"></div>
                            </div>
                        </li>
                        <li>
</div>
</ul>

守则的一些细节： ul保持完整滑块。比所有的li都用div#fcf#wrapper包装，它的宽度等于所有li，我将用javascript确定，但现在我只输入一个值。为了不显示包装器的额外部分，我将溢出设置为隐藏。问题是，当我将溢出设置为隐藏时，div“hover_preview”也被隐藏：(

---

希望得到您的帮助。谢谢！

请执行以下操作：

 $("#fcf_wraper img").hover(
                function () {
                    $("div.hover_preview").css({
                        position: "absolute",
                        left: $(this).offset().left + "px",
                        top: $(this).offset().top - $("div.hover_preview").outerHeight() + "px",
                        display: "block"
                    });
                }, 
                function () {
                    $("div.hover_preview").hide();
            });

---

您好，谢谢您的回复。现在这不是真正的问题。如果您现在检查url，您可以看到我添加了将在图像悬停时显示的div。如果您看一看，您可以看到fcf_包装器现在在左侧。它的容器应该设置为overflow hidden。但是当我这样做时，div也被隐藏：（位置：绝对没有真正的影响。希望你明白我的问题。如果没有，我会再次解释。再次感谢！我可以从你的网页上看到fcf_wraper div的右侧溢出。但是由于图像悬停效果在你的网页中还不起作用，我看不到问题。再次检查。现在我使用了单击而不是悬停，但我不知道如何使用为了处理$this。我在被标记扭曲的单击的img旁边有.hover\u preview div。我应该使用同级方法还是下一步？只要悬停div在ul（特征\u分类）内，如果featured\u classifields类的overflow设置为hidden，则不会显示您的悬停div。我建议您将一个悬停div放在ul外部，并通过ajax动态加载内容。至于在图像后选择div，您可以使用

next（）

或

Siders（）

方法：

$（this）.parent（“a”）.next（“悬停预览”）

 $("#fcf_wraper img").hover(
                function () {
                    $("div.hover_preview").css({
                        position: "absolute",
                        left: $(this).offset().left + "px",
                        top: $(this).offset().top - $("div.hover_preview").outerHeight() + "px",
                        display: "block"
                    });
                }, 
                function () {
                    $("div.hover_preview").hide();
            });