幫助我進行CSS定位

Question

我對html和css有經驗，但對css定位卻不太滿意。 這是總的想法。 假設我有一個圖像鏈接，當我將鼠標懸停在鏈接中時，我需要顯示一個div，其中將顯示該項目的一些信息。 我知道應該通過絕對定位來完成。 但這對我不起作用。 讓我展示一下設計：

http://beta.citystir.com/wp-content/uploads/2011/02/sadf.jpg

到目前為止，我的工作可以在這里看到： http : //beta.citystir.com/static/

這是HTML。 我已經顯示了一項的代碼。 Hover_preview將是懸停時應顯示的整個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>

CSS：

ul#featured_classifields{
    margin: 0 30px;
    height:95px;
    overflow:hidden;
    position:relative;
}

#fcf_wraper{
    width:1600px;
    height:90px;
}

ul#featured_classifields li{
    float:left;
    width:135px;
    height:90px;
    background:#ddd;
    display:block;
    margin: 8px 8px 5px 0;
    position:relative;
}    

.hover_preview{
        position:absolute;
        z-index: 5;
        bottom:100%;
}

.hover_preview_main{
        background: #000;
        width:400px;
        height: 300px;
    }

    .hover_preview_arrow{
    }

代碼的一些詳細信息：ul按住完整滑塊。 比所有li都用div #fcf_wraper包裝，其寬度等於我將通過javascript確定的所有li的寬度，但現在我只輸入一個值。 為了不顯示包裝器的多余部分，我將溢出設置為隱藏。 問題是當我將溢出設置為隱藏時，div“ hover_preview”也被隱藏了:(

希望能得到您的幫助。 謝謝！

Answer 1

做這樣的事情：

 $("#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();
            });