焦點輸入然后更改外部div顏色

Question

演示

您會看到有一個紅色區域。 此紅色是主要div背景顏色。 而這個div里面有input 。

因此，如果您單擊紅色區域，則可以看到搜索圖標更改了背景顏色。 但是，當您單擊輸入區域時，顏色不會改變。 我在這里可以做什么？

HTML：

<div class="tt" tabindex="2">
  <div class="test"></div>
  <input type="text" class="input" placeholder="Some text..."/>
</div>

CSS：

.tt {
  width:500px;
  height:50px;
  margin:0px auto;
  margin-top:100px;
  background-color:red;
}
.test {
  float:left;
  position:absolute;
  z-index:1;
  width:50px;
  height:50px;
  background-color:blue;
  border-radius:50%;
  background-image:url(http://www.androidpolice.com/wp-content/uploads/2014/06/nexusae0_search.png);
  background-size:50px;
   transition: transform(rotate);
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(0.770, 0, 0.150, 1);
}
.tt:focus .test{
   -webkit-transform: rotate(360deg);
  border-radius:50%;
  background-image:url(http://ajkdjournal.org/wp-content/uploads/2014/05/e62f58b03dbcfda4a54f6bac1057305e.png);
}
.input{
  border:none;
  outline:none;
  padding:18px;
  width:400px;
  text-indent:40px;
}

Answer 1

我在HTML和CSS中添加了一些更改。 我希望它可以幫助演示

<div class="tt" tabindex="2">
    <!-- note I changed the HTML structure + added changes in the CSS -->
    <input type="text" class="input" placeholder="Some text..."/>
    <div class="test"></div>
</div>

Answer 2

您需要將輸入內容放在.test div之前，然后使用同級選擇器（+）。 代碼應為：

HTML：

<div class="tt" tabindex="2">
  <input type="text" class="input" placeholder="Some text..."/>
  <div class="test"></div>
</div>

CSS：

.input:focus + .test{
   -webkit-transform: rotate(360deg);
  border-radius:50%;
  background-image:url(http://ajkdjournal.org/wp-content/uploads/2014/05/e62f58b03dbcfda4a54f6bac1057305e.png);
}

希望對您有所幫助！