我从 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;
}
答案 0 :(得分:0)
Apparently,您无法将height
设为auto
,但您可以将max-height
设为固定数字。它只适合文本,因为它是max-height
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>
答案 1 :(得分:0)
非常简单的变化。您在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;
}