Tutorial :Mouse Over/Mouse Out on DIV


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?


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.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »