Pseudo after element css properties are not working in jquery [duplicate]

Question

I'm working on the pseudo class element here on hover I want to change ::after background color, I have tried but its is not working. Can anyone suggest me in the right direction why it is not working.

$(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>

Possible duplicate of Access the css ":after" selector with jQuery And there are about 20 questions about accessing pseudo-elements with javaScript/jQuery on StackOverflow alone. Please research before posting here. Just by 'asking' on google pseudo-elements with jquery you would've found at least 30 helpful answers. — Mihai T
– Mihai T, Commented May 21, 2019 at 6:14

prasanth · Accepted Answer · 2019-05-21 05:47:19Z

1

Js not supporting pseudo element properties. better Do with 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>

answered May 21, 2019 at 5:47

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Xenio Gracias · Accepted Answer · 2019-05-21 05:47:46Z

you cannot target pseudo element in jQuery so i have created 1 class changed

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

and toggled that class when hover in jQuery.

Hope this helps. thanks

$(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>

Collectives™ on Stack Overflow

Pseudo after element css properties are not working in jquery [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related