Mouse Over/Mouse Out on DIV

Question

I have the following 3 column layout:

       <div id="outerwrap">
            <div id="innerwrap">      
               <div id="centerc">...</div>          

               <div id="rightc" style="font-weight:bold">
            </div>
            <div style="background-color:White;height:10px;top:284px;left:0px"></div>

            <div id="leftc">..</div>
       </div>
       <div id="footer"">...</div>

    #outerwrap
    {
       background-color: #EE44E7;
    }

    #innerwrap
    {
       background-color: #EE44E7;
       margin-right: 200px;
       top:0px;
       height:100%;
    }


    #leftc
    {
       position: absolute;
       top: 111px;
       left: 0px;
       width: 197px;
       background-color: #EE44E7;
       font-size: 10px;
    }

    #centerc
    {
       position: relative;
       margin-left: 199px;
       padding: 0px;
       background-color: white;
    }

    #rightc
    {
       position: absolute;
       top:111px;
       right: 0px;         
       width: 199px;
       color: blue;
       background-color: #EE44E7;
       font-size: 10px;
    }


    #footer
    {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 62px;
    visibility: hidden;
    }

What I plan to do is load the page with the left div (div id="leftc") in a semi-visible state..like just showing 10% of the div. When the user hovers over the mouse over it, the div should expand to its normal, on mouse out, it should return to its semi visible state..kinda an auto hide behavior

How can i achieve this best across multiple browsers and using jQuery or CSS?

Answer 1

Try here:

http://stackoverflow.com/questions/199046/how-do-i-select-a-mouse-hovered-object-with-jquery

and here:

http://stackoverflow.com/questions/158070/jquery-how-to-position-one-element-relative-to-another

Answer 2

Simple solution would be to use the jQuery height method, but that might mess up your layout unless you're carefull with the HTML that's inside #leftc. Overflow:hidden might help here.

You could use the css clip property, plus jQUery's hover. In mouse over, remove the clip, in mouse out, apply the clip. If you want to animate it (which is the next shiny progression :) ) then there's a jQuery plugin for that too.