元素css属性后的伪不适用于jquery

Question

我在悬停时正在处理伪类元素，我想更改::after背景色，我已经尝试过了，但是它不起作用。谁能在正确的方向上建议我为什么它不起作用。

$(document).ready(function() {
  $('.box').click(function() {
    $('.box:after').css('background-color', 'yellow');
  });
});

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: red;
}

.box:after {
  content: '';
  position: absolute;
  top: 133%;
  width: 50px;
  height: 50px;
  background-color: green;
}

.content {
  position: absolute;
  left: 50px;
  width: 0;
  height: 50px;
  background-color: blue;
  transition: all 0.5s linear;
}

.box:hover .content {
  width: 600px;
  transition: all 0.5s linear;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="box">
  <div class="content"></div>
</div>

Answer 1

Js不支持pseudo element属性。更好地使用CSS

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: red;
}

.box:after {
  content: '';
  position: absolute;
  top: 133%;
  width: 50px;
  height: 50px;
  background-color: green;
}

.box:hover:after {
  background-color: yellow;
}

.content {
  position: absolute;
  left: 50px;
  width: 0;
  height: 50px;
  background-color: blue;
  transition: all 0.5s linear;
}

.box:hover .content {
  width: 600px;
  transition: all 0.5s linear;
}

<div class="box">
  <div class="content"></div>
</div>

Answer 2

您无法在jQuery中定位pseudo element，因此我创建了1个类changed

.changed:after{
 background-color: yellow;
}

并在jQuery中悬停时切换该类。

希望这会有所帮助。谢谢

$(document).ready(function() {
  $('.box').hover(function() {
    $(this).toggleClass('changed');
  });
});

.box {
  position: relative;
  width: 50px;
  height: 50px;
  background-color: red;
}

.box:after {
  content: '';
  position: absolute;
  top: 133%;
  width: 50px;
  height: 50px;
  background-color: green;
}

.content {
  position: absolute;
  left: 50px;
  width: 0;
  height: 50px;
  background-color: blue;
  transition: all 0.5s linear;
}

.box:hover .content {
  width: 600px;
  transition: all 0.5s linear;
}

.changed:after{
 background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="box">
  <div class="content"></div>
</div>