html - CSS 过渡错误

Question

我在使用 CSS 时遇到了一些问题。我编写了一个简单的文本框，单击它时会下拉一个 div，但它似乎不起作用。如果有人可以帮助我，我会很高兴的。

CSS：

input {
    top:18px;
    left:20px;
    width:1230px;
    padding:4px;
    border:1px dashed #eeeeee;
    font:16px arial;
    font-weight:bold;
    color:#d8d8d8;
}

input:focus {
    height:200px;
}

div {
    overflow:hidden;
    padding:0;
    margin:0; 
    height:0; 
    width:1230px; 
    border:1px dashed #eeeeee; 
    background-color:transparent; 
    transition:height.5s; 
    -moz-transition:height 0.5s;
    -o-transition:height 0.5s; 
    -webkit-transition:height 0.5s;
}

body {
    background-image:url('pic.bmp');
    background-repeat:no-repeat;
}

Answer 1

您必须使用input:focus + div来选择您的部门。

这是您想要的纯 CSS 版本：jsFiddle

Answer 2

我猜您需要更改input:focus为input:focus div（如果 div 在输入元素中）或类似的东西input:focus + div（如果 div 在输入之后），但是如果没有看到您的标记，很难说。

Answer 3

div 具有overflow: hidden属性，这将导致在呈现 div 的高度时忽略任何内部元素的高度。