checkbox:checked 上的动画不工作

Question

所以我在纯 CSS 中制作了一个响应式导航栏，当我的复选框被选中时，每个转换都有效，但不是我用作汉堡包按钮的标签的框阴影的颜色对于我的复选框。

我不知道为什么，你能帮我吗？我已经对我的代码进行了 fiddle：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;
}

此外，当我的导航栏展开时我的导航栏不透明度的文本是动画的，但当它折叠时不是：s 这里的属性不起作用

#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;
}

它解决了我所有的问题，我还编辑了 fiddle

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

checkbox:checked 上的动画不工作

Animation on checkbox:checked not working

html

css

checkbox

navbar