html - 聚焦 Div 后无法更改图标颜色

Question

我在 css 上相当“新手”，并试图在主 div 聚焦时更改 FontAwesome 图标的颜色。我尝试了几种方法，尝试使用 div 的 id 或 class 在 focus 上更改它的颜色，但都没有用。

我还尝试了 active 和 hover 状态只是为了测试，但都没有效果。

HTML

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 form-group">
   <label for="username" class="..">User Field <span class="..">*</span></label>
   <div id="test" class="has-feedback">
      <input type="text" class="form-control" id="username" vk_1e5ee="subscribed">
      <span class="fa fa-user form-control-feedback" aria-hidden="true"></span>
   </div>
</div>

CSS

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    pointer-events: none;
}

.form-control:focus .form-control-feedback:focus  {
  color:red;
}

/*
#test:focus span .fa {
  color:red;
}*/

JSFiddle 链接: http://jsfiddle.net/xh8wsr5g/2/

我可以在获得焦点时更改主 div 的颜色，但不能更改图标。你会建议我做什么？提前致谢。

Answer 1

你只需要使用兄弟选择器。

你的 font-awesome span 是 textbox 的兄弟，所以下面的一个是行不通的

.form-control:focus  {
  color:red;
}

取而代之的是你必须使用下面的代码

.form-control:focus + .form-control-feedback {
  color:red;
}

在这里查看 fiddle :http://jsfiddle.net/xh8wsr5g/1/

因此，只要文本框处于焦点位置，字体超赞的跨度颜色就会是红色。

有关兄弟选择器的信息，请参阅此链接 https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors