html - 兄弟悬停上的 CSS 翻译按钮

Question

我正在尝试创建一堆按钮，这些按钮将从顶部悬停按钮下方滑出，但它在 my Codepen 中不起作用。 (http://codepen.io/dmoz/pen/xIsfL)。

代码如下:

HTML

<button class="one"></button>
<button class="two"></button>
<button class="three"></button>
<button class="four"></button>
<button class="five">^</button>

CSS

button {
  margin: 0;
  font-size: 12px;
  padding: 0;
  border: 0 none;
  cursor: pointer;
  color: #fff;
  width: 60px;
  height: 60px;
  display: block;
  text-transform: none;
  border-radius: 0;
  background-color: #0078E7;
  background-image: none;
  box-shadow: none;
  position: absolute;
  overflow: visible;
}
.one {
  background-color: #3b5997;
  color: #ffffff;
  left: 10;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.two {
  background-color: #ba0f16;
  color: #ffffff;
  left: 10;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.three {
  background-color: #d64937;
  color: #ffffff;
  left: 10;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.four {
  background-color: #0073b2;
  color: #ffffff;
  left: 10;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
}
.five {
  background-color: #ffffff;
  border: 1px solid #888888;
  color: #888888;
  left: 10;
}
.five:hover ~ .one {
  left: 70px;
}
.five:hover ~ .two {
  left: 130px;
}
.five:hover ~ .three {
  left: 190px;
}
.five:hover ~ .four {
  left: 250px;
}

有人知道为什么它不起作用吗？

Answer 1

CSS3 选择器 ~ 仅适用于第一个元素之后的兄弟元素，无论其间有多少个兄弟元素。 CSS2.1 选择器 + 仅适用于直接的 NEXT 元素。因此，您的代码将无法运行，因为 .five 是最后一个元素。没有 previous sibling 姐妹的选择器。

如果您将第五个按钮移到其他按钮之前并向其添加 z-index，它将起作用，请参见 http://codepen.io/anon/pen/kEjwe

更新:根据要求，CodePen 示例现在有一个包装器 div 呈现按钮子元素。因此，不再需要兄弟选择器。这样，当悬停包装器时可以单击各个按钮。