悬停时滑入隐藏元素答案

【问题标题】：Slide in a hidden element on hover悬停时滑入隐藏元素
【发布时间】：2013-11-28 05:03:35
【问题描述】：

当鼠标移动到屏幕右侧时，我正在尝试从屏幕右侧创建一个滑动菜单。当元素未被隐藏时，我们可以给出hover 效果，或者我们使用click 事件。但是当鼠标指针移动到屏幕右侧时，我想从右侧滑入div。

我还有另一个问题。

我正在使用Twitter Bootstrap 3。

假设我有一个div，其类为test1，在该div 中，我还有另一个div，其类为test2。如果我将test2div 的height 设为100px；我猜test1 的高度自动为 100px。但就我而言，它没有发生。 div test1 的高度保持为 0px。

<div class="test1">
    <div class="test2">
        ..content..
    </div>
</div>

提前致谢。

【问题讨论】：

test2 是浮动元素吗？如果是这样，解决方法是使 test1 overflow: hidden
发布 test1 和 test2 的 CSS。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这是一个纯 CSS 的解决方案：

<div class="page-wrapper">
    <div class="sidebar-wrapper">
        <div class="sidebar">
            <h1>Sidebar</h1>
        </div>
    </div>
    <div class="main-content">
        <h1>Main content</h1>
    </div>
</div>

CSS：

.page-wrapper {
    position: relative;
}
.sidebar-wrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: inline-block;
    position: fixed;
    right: -180px;
    padding-left: 20px;
    width: 200px;
    -webkit-transition: all 0.5s; /* for a bit of sexiness */
    -moz-transition: all 0.5s;
}
.sidebar-wrapper:hover {
    right: 0;
}
.sidebar {
    background: #acacac;
    color: #fff;
    min-height: 600px;
}

这是一个小提琴http://jsfiddle.net/8rT9r/

【讨论】：

谢谢各位。这真的给了我一个想法。

【解决方案2】：

方式一：跟踪鼠标位置，当鼠标指针在屏幕右侧时，编写JS显示菜单。

方式 2：在屏幕右侧设置 100% 高度和 5px（可以根据需要更改）宽度的 div，并在该 div 悬停时显示菜单。

查询 2：如果您的外部 div 是浮动的，请使用 clearfix 解决高度问题。

【讨论】：

我会试试这两种方法。