Question

我尝试制作汉堡菜单，但是我很难使它正常工作。

我的起点是动画https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js，第一次我只是想添加一个行为：set opacity：0;转到另一个div（菜单内容）。

我以为在该div中添加class =“ change”并使用适当的CSS规则即可完成这项工作，但是尽管应用了该类，但只有“菜单按钮”才使用新的CSS，而不是内容div。有人知道错过了什么吗？

这是我所做的一个代码笔：https://codepen.io/anon/pen/pBBNaV

.change .overlay-content {
  opacity: 0;
}

谢谢您的时间！

Answer 1

我认为您的问题是您要淡入淡出的div的CSS选择。

您拥有：.change .overlay-content，它将在具有类更改的元素内找到具有类overlay-content的元素。

您需要的是.change.overlay-content（注意已删除的空格），该元素将找到一个同时包含更改类和覆盖内容的元素。