兄弟悬停时的 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 是最后一个元素。 上一个兄弟姐妹没有选择器。

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

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