html - 如何在元素聚焦时动态更改 sass 属性？

Question

我有一个输入类型搜索和一个位于其下方的 div。 当搜索框获得焦点时，我想将 div 的颜色从蓝色更改为红色。

我的分区

  <div id="demo-2">
    <input type="search" placeholder="Search By Title, Author" />
    <div class="autocomplete">
      hello
    </div>
  </div>

我申请的类(class)

#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;
}

.autocomplete {
  background-color: blue;
  height: 350px;
  width: 275px;
  position: absolute;
  display: block;
  right: 1em;
  top: 1em;
  z-index: -50;
  margin-right: 20px;
}

我的要求是，在不使用任何 javascript 的情况下聚焦搜索时，类自动完成的背景颜色应从蓝色变为红色。

尝试了下面的代码但没有成功

#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;

  .autocomplete {
    background-color: red;
  }
}

Answer 1

您可以使用 adjacent sibling combinator (+)或 general sibling combinator (~)

#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;

  ~ .autocomplete {
    background-color: red;
  }
}