我的代码[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

显然，您不能将height动画为auto，但可以将max-height动画为固定数字。它只适合文本，因为它是max-height

演示 at CodePen是因为它有“整洁”和AutoPrefixer内置。

​

#expand {
  text-transform: uppercase;
  font-size: 150%;
  border-width: 100%;
  background: #d4d4d4;
  color: #7a7a7a;
  transition: 0.5s;
}

label {
  cursor: pointer;
}

div {
  background: #d4d4d4;
  width: 75%;
  max-height: 35px;
  overflow: hidden;
  transition: 0.5s;
}

div:hover {
  background: #b2b0b0;
  max-height: 5000px;
}

<div>
  <label id="expand" for="expand-1">I'm a toggle</label>
  <p>I'm controlled by toggle. No JavaScript!I'm controlled by toggle. No JavaScript!I'm controlled by toggle. No JavaScript!</p>
  <br>
  <p>hi</p>
</div>

​

Answer 2

非常简单的改变。演示中所做的更改

在css.下面修改的

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

增加了一个新的类

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