我正在尝试实现一个滑动侧边栏，当用户将鼠标悬停在.sb-toggle项目上时，该侧边栏会激活。将鼠标悬停在它上方会使位于视图外侧的侧边栏在10周内滑动，同时使.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>
兄弟选择器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;
}只在DOM中向前看，而不是向后看。因此，<body>
<div class="navbar"></div>
<div class="sidebar">
<div class="sb-toggle"></div>
</div>
<div class="content"></div>
</body>线永远不会被执行。
来自MDN文档：
“〜组合子选择兄弟姐妹。这意味着第二个元素跟随第一个元素（虽然不一定立即），并且两个元素共享同一个父元素。”
做了一个小小的演示，以显示上述行为：.sb-toggle {
/* other stuff */
margin-left: 0; /* <-- You need to add this */
-moz-transition: margin-left 0.5s ease;
transition: margin-left 0.5s ease-in-out;
}
您要么必须交换DOM节点的顺序，要么找到另一个路由来触发转换