悬停时将css应用于兄弟元素答案

【问题标题】：Applying css to sibling element when hovering悬停时将css应用于兄弟元素
【发布时间】：2018-02-03 13:22:10
【问题描述】：

我有一个带有标签的输入框。标签位于输入框内。当输入框获得焦点时，我希望标签在输入框上方移动。

我想我需要在输入框被选中时使用 input:focus ~ label 来聚焦标签，但我无法让它工作。

html:

<div class="search-container">
  <form [formGroup]="SearchForm" (ngSubmit)="getWeatherFromCity(SearchForm.value)" name="SearchForm">
      <div class='city-input'>
      <label for="searchCity">City </label>
      <input class="form-input" formControlName="searchCity" id="searchCity">
    </div>
      <button class="button" title="Search">Search
      </button>
  </form>
</div>

css:

.search-container{
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  margin: 20px;

  .city-input{
    position: relative;
    display: inline;
    input{
      border-radius: 10px;
      height: 2em;
      width: 17.5em;
      &:focus ~ label {
      transform: translateY(-30px);
      color: red
      }
    }
      label{
      transition: transform 0.5s;
      position: absolute;
      padding: 10px;
    }
  }

请指教。

干杯。

【问题讨论】：

因为标签应该放在之后而不是之前
通用兄弟组合器 (~) 将选择跟随引用的每个兄弟。正如@TemaniAfif 建议的那样，将<label> 移动到<input> 之后将解决这个问题。
哦哇 - 非常感谢 Temani。所以伪类（焦点）必须在它被调用的元素（标签）之前？
太棒了 - 感谢@agrm！

标签： html css sass

【解决方案1】：

你不能只用 css afaik 选择前一个元素

你可以为此使用 jQuery，有点...demo

$( ".form-input" ).focus(function() {
  $(".form-input").prev("label").addClass("the-class-to-handle-the-transition");
});                     
$( ".form-input" ).focusout(function() {
  $(".form-input").prev("label").removeClass("the-class-to-handle-the-transition");
});

【讨论】：