Question

所以我在纯CSS中制作了一个响应式导航栏，当我的复选框被选中时，每个过渡都正常工作：选中但不是我用作复选框汉堡按钮的标签盒阴影的颜色。

我想知道为什么，你能帮帮我吗？我已经把我的代码搞砸了：CSS末尾的最后一个属性是不工作的

#show-menu:checked + .show-menu:before {
    background: #9F6C66;
    box-shadow: 0 9px 0px 0 #9F6C66, 0 18px 0 0 #9F6C66;
    transition: .2s ease-in-out;
    -webkit-transition: .2s ease-in-out;
}

此外，我的导航栏不透明度的文本在我的导航栏扩展时生成动画，但在其折叠时不动画：这里的属性不起作用

#navbar-nav {
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    position: relative;
    list-style-type: none;
    transition: opacity .2s ease-in-out;
    -webkit-transition: opacity .2s ease-in-out;
}

#show-menu:checked + #navbar #navbar-nav {
    visibility: visible;
    opacity: 1;
    transition: opacity .2s ease-in-out .2s;
    -webkit-transition: opacity .2s ease-in-out .2s;
}

这是我第一次通过复选框在CSS中触发事件:)提前感谢！

Answer 1

问题出在我的HTML中，而不是我的CSS

我必须在结尾处将按钮包含在导航栏中并在我的CSS中精确地

#show-menu:checked + **#navbar** .show-menu:before {
background: #9F6C66;
box-shadow: 0 9px 0px 0 #9F6C66, 0 18px 0 0 #9F6C66;
transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
}

它解决了我所有的问题，我也编辑了小提琴

http://jsfiddle.net/zakL5e8b/2/

动画复选框：选中不起作用

1 个答案: