鼠標/鼠標輸出的DIV

Question

我有以下三欄佈局：

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

我打算做的是與左格加載頁面（DIV ID =「leftc」）在半可見狀態..就像顯示10％的div。當用戶將鼠標懸停在鼠標上時，div應該展開到正常狀態，在鼠標懸停時，它應該返回到半透明狀態.kinda自動隱藏行爲

如何在多個瀏覽器中實現最佳效果並使用jQuery或CSS？

Answer 1

簡單的解決方案是使用jQuery height方法，但這可能會弄亂您的佈局，除非您對#leftc中的HTML格外小心。溢出：隱藏可能有幫助。

您可以使用css clip屬性，再加上jQUery's hover。在鼠標懸停的狀態下，移除剪輯，在鼠標移出時應用剪輯。如果你想動畫（這是下一個閃亮的進程:)），那麼也有一個jQuery plugin。