我正在尝试实现一个滑动边栏,当用户将鼠标悬停在.sb-toggle
项目上时会激活该边栏。将鼠标悬停在其上方将使位于视图外部的侧边栏滑动10em,同时还使.content
div向右移动。但是我无法使其正常工作。.sb-toggle
和.content
项目会触发过渡,但不会显示侧边栏。
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.navbar {
z-index: 1;
position: fixed;
top: 0%;
background-color: #333;
height: 3em;
width: 100%;
overflow: hidden;
border-bottom: 1px solid grey;
}
.sidebar {
background-color: #404040;
width: 10em;
height: 100%;
position: fixed;
margin-left: -10em;
top: 3em;
bottom: 0;
-moz-transition: margin-left 0.5s ease;
transition: margin-left 0.5s ease-in-out;
}
.sb-toggle {
background-color: #404040;
width: 1.5em;
height: 100%;
position: fixed;
top: 3em;
left: 0;
-moz-transition: margin-left 0.5s ease;
transition: margin-left 0.5s ease-in-out;
}
.content {
margin-top: 3em;
margin-left: 10em;
height: inherit;
width: inherit;
transition: margin-left 0.5s ease-in-out;
}
.sb-toggle:hover {
margin-left: 10em;
}
.sb-toggle:hover ~ .sidebar {
margin-left: 0;
}
.sb-toggle:hover ~ .content {
margin-left: 20em;
}
编辑:这是HTML:
<body>
<div class="navbar"></div>
<div class="sidebar"></div>
<div class="sb-toggle"></div>
<div class="content"></div>
</body>
将.sb-toggle
div放在内.sidebar
,然后:hover
从更改.sb-toggle
为.sidebar
。
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.navbar {
z-index: 1;
position: fixed;
top: 0%;
background-color: #333;
height: 3em;
width: 100%;
overflow: hidden;
border-bottom: 1px solid grey;
}
.sidebar {
background-color: #404040;
width: 10em;
height: 100%;
position: fixed;
margin-left: -10em;
top: 3em;
bottom: 0;
-moz-transition: margin-left 0.5s ease;
transition: margin-left 0.5s ease-in-out;
}
.sb-toggle {
background-color: #404040;
width: 1.5em;
height: 100%;
position: fixed;
top: 3em;
left: 0;
-moz-transition: margin-left 0.5s ease;
transition: margin-left 0.5s ease-in-out;
}
.content {
margin-top: 3em;
margin-left: 10em;
height: inherit;
width: inherit;
transition: margin-left 0.5s ease-in-out;
}
.sb-toggle:hover {
margin-left: 10em;
}
.sidebar:hover {
margin-left: 0;
}
.sidebar:hover ~ .content {
margin-left: 20em;
}
<body>
<div class="navbar"></div>
<div class="sidebar">
<div class="sb-toggle"></div>
</div>
<div class="content"></div>
</body>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句