css - 求css/scss选择器改变:before behavior on :focus

Question

我这里有一些 SCSS 代码:

  .location {
    animation-delay: 80ms;
    position: relative;
    &:before {
      font-family: "FontAwesome";
      font-size: 24px;
      content: "\f041";
      position: absolute;
      left: 4px;
      top: 12px;
    }
    input {
      text-indent: 28px;
    }
  }

我想更改 .location:before 的文本颜色，ON .location input:focus。这甚至可以用纯 css 实现吗？

感谢任何帮助:)

Answer 1

试试这个

$(document).ready(function() {
  $('.location input').on('focusin', function(event) {

    $('.location').addClass('text-red')

  }).on('focusout', function(event) {

    $('.location').removeClass('text-red')

  });
})

.location {
  animation-delay: 80ms;
  position: relative;
}

.location:before {
  content: "Hi....";
  //font-family: "FontAwesome";
  //font-size: 24px;
  //content: "\f041";
  position: absolute;
  left: 4px;
  top: 20px;
}

input {
  text-indent: 28px;
}

.text-red:before {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="location">
  <input type="text" name="">
</div>