Can I change this CSS with jQuery or JavaScript? [duplicate]

Question

Hey this is super simple, I hope...

Can I use jQuery or JavaScript to change this:

.tint:hover:before {  
    background: rgba(0,0,255, 0.5);
}

To this:

.tint:hover:before {  
    background: rgba(255,0,0, 0.5);
}

Daan · Accepted Answer · 2014-05-01 13:23:29Z

1

No, Pseudo-elements are not part of the DOM (Document Object Model), so they can't be manipulated by jQuery or Javascript.

answered May 1, 2014 at 13:23

Daan

2,8101 gold badge22 silver badges41 bronze badges

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

Comments

Mark Walters · Accepted Answer · 2014-05-01 13:03:01Z

1

Why not have a separate class

.newTint:hover:before {
   background: rgba(255,0,0, 0.5);
}

Then use jQuery to switch the classes

$('#myField').removeClass('tint').addClass('newTint');

answered May 1, 2014 at 13:03

Mark Walters

12.4k6 gold badges36 silver badges48 bronze badges

Because the value could be "255,255,255, 0.5", "0,0,0, 0.5", or any thing in-between if that makes sense. Perhaps I could create the class first?

xcept · Accepted Answer · 2014-05-01 13:10:38Z

0

Yes you can by putting this in your script

$(document).ready(function(){
$('.tint:hover:before').css('background',' rgba(255,0,0, 0.5)');
});

answered May 1, 2014 at 13:10

xcept

431 silver badge7 bronze badges

This doesn't seem to work.

thats weird, when I try it it works

can you give me a link, this page here: