Change opacity of pseudo element with javascript

Asked Oct 25 '20 at 02:15

Active Oct 25 '20 at 02:15

Viewed 28 times

I have a tooltip which is a pseudo element shown when hovering over an image. It works well, the tooltip animates in and out.

I'd also like to be able to trigger showing the pseudo element tooltip with javascript. I've read many posts about javascript being unable to target pseudo elements as they're not part of the DOM, but then I've seen some posts which can, specifically this one and this one.

I just need js to change the opacity of the ::before element, the rest I can do, but I don't even know where to start.

The following is from one of the two links above, it can grab the color of the ::before element;

var color = window.getComputedStyle(document.querySelector('.element'),':before').getPropertyValue('color');

but I'm looking for something to the effect of:

window.setComputedStyle(document.querySelector('.element'),':before').setPropertyValue('opacity',"1.0");

Any help would be much appreciated.

asked Oct 25 '20 at 02:15

Brad

1,019
1
9
22

Is it possible to do it via dynamically adding a class and then accessing the pseudo element by css. – Pankaj Prajapati Oct 25 '20 at 02:30
from the duplicate: https://stackoverflow.com/a/49618941/8620333 – Temani Afif Oct 25 '20 at 02:44
@TemaniAfif, that post uses jQuery, I am not using jQuery, please don't close this question. – Brad Oct 25 '20 at 03:07
don't simply read the title, read *all* the duplicate – Temani Afif Oct 25 '20 at 08:20

Change opacity of pseudo element with javascript

0 Answers0