Can I change this CSS with jQuery or JavaScript?

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);
}

score 1 · Answer 1 · answered May 01 '14 at 13:03

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 01 '14 at 13:03

Mark Walters

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? – SuperKim May 01 '14 at 13:07

score 1 · Accepted Answer · answered May 01 '14 at 13:23

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 01 '14 at 13:23

Daan

score 0 · Answer 3 · answered May 01 '14 at 13:10

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 01 '14 at 13:10

xcept

3 Answers3