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

Apparently，您无法将height设为auto，但您可以将max-height设为固定数字。它只适合文本，因为它是max-height

CodePen上的

Demo因为它有“整洁”和内置的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

非常简单的变化。您在jsfiddle Demo

中所做的更改

在css下修改..

public async Task<ServiceAvailabilityDTO> ServiceAvailabilityStatus()
{
    return new ServiceAvailabilityDTO
    {
        IsDb1Online = await IsDb1Available(),
        IsDb2Online = IsDb2Available(),
        IsDb3Online = await IsDb3Available(this) // This is an example. I want to pass the reference of **ServiceAvailabilityDTO** to **IsDb3Available**
    };
}

private async Task<bool> IsDb3Available(ServiceAvailabilityDTO availability)
{
    try
    {
        var pong = await _db3Provider.PingDb();
        if(pong.Success == true && pong.Version != null)
            return true;

        return false;
    }
    catch (Exception e)
    {
        var exceptionMessage = e.Message;
        if (e.InnerException != null)
        {
            // This is what I hope to put into the object reference
            exceptionMessage = String.Join("\n", exceptionMessage, e.InnerException.Message);
            availability.db3Exception = exceptionMessage ;
        }

        return false;
    }
}

添加了新类

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

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

2 个答案: