当输入框聚焦时，动画父级div

Question

我正在尝试让当用户点击输入框时，它可以升至屏幕顶部。我已经实现了这个功能，但是无法使父级div中的其他内容与其一起移动。以下是我的代码：

container{

} 
input#search-bar:focus{
  position: absolute;
  border: 1px solid #008ABF;
  transition: 0.35s ease;
  color: #008ABF;
  margin-top: -10px;
}

<div class="container">
  <div class="brandHeader">
    <h1>My Header</h1>
  </div>
  <form class="formHolder">
    <input type="text" id="search-bar" placeholder="Search">
  </form>
</div>

我希望当搜索栏上移10像素时，我的标题也能同时上移10像素。

如果您需要任何我漏提供的额外信息，请询问并告知我。

- Blezx

---

按照您目前的HTML结构，无法仅使用CSS实现此操作。在CSS中无法选择父元素或前一个兄弟元素。您需要使用JavaScript来实现。 - skyline3000

Answer 1

一种纯CSS的解决方案 - Flexbox 的顺序

如果你愿意稍微改变一下你的html，就可以通过更改dom来使input在html中处于第一位，但在屏幕上却是第二位。该方法使用flexbox的order属性实现。

以下是一个例子。

.container {
  display: flex;
  flex-direction: column;
}
input {
  display: flex;
  flex-direction: column;
  order: 2;
}
.brandHeader {
  display: flex;
  order: 1;
  transition: all 0.2s ease;
}
input:focus + .brandHeader {
  margin-top: -10px;
}

<form class="container">
  <input type="text" id="search-bar" placeholder="Search">
  <div class="brandHeader">
    <h1>My Header</h1>
  </div>
</form>

fiddle

https://jsfiddle.net/Hastig/djj01x6e/

如果这对您有用，请告诉我，我将进一步解释。

---

第二个纯CSS解决方案 - flex-direction: column-reverse

与第一个解决方案几乎相同，但无需使用order: x;

.container {
  display: flex;
  flex-direction: column-reverse;
} 
input {
  display: flex;
  flex-direction: column;
 }
.brandHeader {
  display: flex;
  transition: all 0.2s ease;
}
input:focus + .brandHeader {
 margin-top: -10px;
}

<form class="container">
    <input type="text" id="search-bar" placeholder="Search">
    <div class="brandHeader">
      <h1>My Header</h1>
    </div>
</form>

fiddle

https://jsfiddle.net/Hastig/djj01x6e/1/

---

您可以使用 position: absolute 在没有 flexbox 的情况下完成类似的操作，以将输入框保持在 dom 中的第一个位置但在屏幕中显示为第二个，但这也取决于您能否更改 html 结构。

- Hastig Zusammenstellen

Answer 2

你可以使用jQuery在input:focus时切换或添加brandHeader的类，然后可以为h1和input添加过渡效果。

- Wim Mertens