Question

I am experince with html and css but not good with css positioning. Here is the total idea. Suppose i have a image link when i hover in the link i need to show a div where i will present some info of the item. I know it should be done by absolute positioning. But this not working for me. Let me show the design:

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

And my work so far you can see here: http://beta.citystir.com/static/

Here is the Html. I have shown code for one item. Hover_preview will be the whole div that should show when hover. I dont mind about the hover effect right now as i will be doing it via javascript. Only help me with how i can show the div properly.

<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{
    }

Some details of the code:
The ul hold the full slider. Than all li are wrap with a div #fcf_wraper its width is equal to all li which i will determine by javascript but for now i just put a value. In order to not showing the extra portion of the wraper i set the overflow hidden. The problem is when i setting the overflow to hidden the div “hover_preview” is also got hidden by it 🙁

Hoping to get some help from you. Thanks!

Answer 1

Do something like this:

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