html - 我的代码有什么问题 [CSS]

Question

一开始我不太擅长 CSS，但我真的很想提高自己。

现在我想要完成的是一个可扩展的窗口，它可以适应内容的大小和扩展动画。

我的主要问题是 #expand:hover 和 rightbut:hover 根本不起作用。而且适合内容的 div 也不起作用，因为当我使用动画百分比时它根本不显示动画。

我知道代码可能完全错误，但我确实需要你的帮助，因为我知道你们都比我清楚。

谢谢! https://jsfiddle.net/VisualTech48/0r27vgv4/1/

    /* Checkbox Hack */

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

#rightbut {
  position: absolute;
  top: 16px;
  right: 26%;
  color: #7a7a7a;
}

#rightbut:hover {
  color: #dddddd;
}

#expand {
  text-transform: uppercase;
  font-size: 150%;
  border-width: 100%;
  backround: #d4d4d4;
  color: #7a7a7a;
  transition: 0.5s;
  /* Animation time */
  -webkit-transition: 0.5s;
  /* For Safari */
}


}
#expand:hover {
  color: #dddddd;
}
label {
  cursor: pointer;
}
p {
  color: black;
}

/* Default State */
div {
  background: #d4d4d4;
  width: 75%;
  height: 35px;
  overflow: hidden;
  transition: 0.8s;
  /* Animation time */

  -webkit-transition: 0.8s;
  /* For Safari */
}

/* Toggled State */
div:hover {
  background: #b2b0b0;
}
input[type=checkbox]:checked ~ div {
  height: 290px;
  background: #fff;
}

Answer 1

非常简单的改变。在你的 jsfiddle 中所做的更改 Demo

Modified below css..

  /* Toggled State */
    div:hover{
       background: #b2b0b0;
       height:auto;
    }
    input[type=checkbox]:checked ~ div {
       height:auto;
       background: #fff;
    }

Added a New Class

input[type=checkbox]:unchecked ~ div {
  // height:290px;
   background: #fff;
}