Question

我在css上非常“ newbie ”并尝试在主要div聚焦时更改FontAwesome图标的颜色。我尝试了几种方法，试图在焦点上使用div的id或class来改变颜色但没有效果。

我还试过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是文本框的兄弟，所以跟随一个是不行的

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

而不是它，你必须使用以下代码

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

请参阅此处的小提琴：http://jsfiddle.net/xh8wsr5g/1/

因此，只要文本框处于焦点，字体真棒的跨度颜色就会变为红色。

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

Answer 2

只需添加此代码：

// to make the text color change
.form-control:focus  {
  color:red;
}

// to make the icon color change
.form-control:focus + .form-control-feedback {
  color:red;
}

你可以尝试这个http://jsfiddle.net/xh8wsr5g/3/

Answer 3

单独使用css无法实现此目的，.form-control-feedback不是.form-control的孩子。因此，.form-control:focus .form-control-feedback:focus不会访问任何元素，请尝试使用jquery更改颜色：

$('.form-control').focus(function(){
    $('.form-control-feedback').css('color','red');
});

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

3 个答案: