我尝试创建一堆按钮,这些按钮会从顶部悬停按钮下方滑出,但它在my Codepen(http://codepen.io/dmoz/pen/xIsfL)中无法正常工作。
以下是代码:
<button class="one"></button>
<button class="two"></button>
<button class="three"></button>
<button class="four"></button>
<button class="five">^</button>
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;
}
任何人都明白为什么它不起作用?
答案 0 :(得分:1)
CSS3选择器~
仅适用于第一个元素之后的兄弟姐妹,无论两者之间有多少兄弟姐妹。 CSS2.1选择器+
仅适用于直接的NEXT元素。因此,您的代码将无效,因为.five
是最后一个元素。 以前的兄弟姐妹没有选择器。
如果您将第五个按钮移到其他按钮之前并向其添加z-index
,则会有效,请参阅http://codepen.io/anon/pen/kEjwe
更新:根据要求,CodePen示例现在有一个包装器div渲染按钮子元素。因此,不再需要兄弟姐妹选择器。这样,当包装器悬停时,可以单击各个按钮。