Question

当鼠标移动到屏幕右侧时，我正试图从屏幕右侧创建一个滑动菜单。如果元素未隐藏，我们可以提供hover效果，或者我们使用click事件。但是当鼠标指针移动到屏幕右侧时，我想从右边的div进行幻灯片。

我也有另一个问题。

我正在使用Twitter Bootstrap 3。

假设我有一个div类test1并且在该div中，我有另一个div类test2。如果我将height div的test2设为100px;我猜自动test1的高度将是100px。但就我而言，它并没有发生。 div test1的高度仍为0px。

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

提前致谢。

Answer 1

方式1：跟踪鼠标位置并编写JS以在鼠标指针位于屏幕右侧时显示菜单。

方式2：在屏幕右侧有一个100％的高度和5px（可以根据需要变化）宽的div，并在该div的悬停时显示菜单。

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

Answer 2

这是一个仅限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 个答案: