我的代码有什么问题 [CSS]答案

【问题标题】：Whats wrong with my code [CSS]我的代码有什么问题 [CSS]
【发布时间】：2016-01-08 19:57:49
【问题描述】：

一开始我对 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;
}

【问题讨论】：

我没有完全理解你..第一个问题`#expand:hover 和 rightbut:hover 根本不起作用`:hover 上你想要什么
好问题...糟糕的标题。我推荐类似“CSS：动画块高度”

标签： html css

【解决方案1】：

非常简单的更改。在您的 jsfiddle Demo

中所做的更改

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

【讨论】：

【解决方案2】：

Apparently，您无法将height 动画化为auto，但您可以将max-height 动画化为固定数字。它正好适合文本，因为它是 max-height

Demo 在 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>

【讨论】：