兄弟悬停上的CSS翻译按钮

时间:2014-10-30 23:43:40

标签: html css css-transitions siblings translate-animation

我尝试创建一堆按钮,这些按钮会从顶部悬停按钮下方滑出,但它在my Codepenhttp://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;
}

任何人都明白为什么它不起作用?

1 个答案:

答案 0 :(得分:1)

CSS3选择器~仅适用于第一个元素之后的兄弟姐妹,无论两者之间有多少兄弟姐妹。 CSS2.1选择器+仅适用于直接的NEXT元素。因此,您的代码将无效,因为.five是最后一个元素。 以前的兄弟姐妹没有选择器。

如果您将第五个按钮移到其他按钮之前并向其添加z-index,则会有效,请参阅http://codepen.io/anon/pen/kEjwe

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