鼠标悬停/鼠标移出 DIV

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>
</div>

<style>
    #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;
    }
</style>

我打算做的是加载页面，左侧 div (div id="leftc") 处于半可见状态..就像只显示 10% 的 div。当用户将鼠标悬停在其上时，div 应展开为其正常状态，鼠标移出时，它应返回其半可见状态..有点自动隐藏行为

我怎样才能在多个浏览器中使用 jQuery 或 CSS 实现最佳效果？

Answer 1

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

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