Question

我有以下3列布局：

       <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（div id =“leftc”）加载到半可见状态。就像显示10％的div一样。当用户将鼠标悬停在鼠标上方时，div应该扩展到正常状态，在鼠标移出时，它应该返回到半可见状态.Kinda自动隐藏行为

如何在多个浏览器中使用jQuery或CSS实现最佳效果？

Answer 1

简单的解决方案是使用jQuery height方法，但这可能会弄乱你的布局，除非你仔细考虑#leftc里面的HTML。溢出：隐藏可能有帮助。

您可以使用css clip属性以及jQUery's hover。在鼠标悬停时，删除剪辑，在鼠标移出时，应用剪辑。如果你想为它制作动画（这是下一个闪亮的进展:)）那么也有jQuery plugin。

DIV上的鼠标悬停/鼠标移出

1 个答案: