0

So I got my script with the DOM: HTML and JS When I hoover cursor over one of the given blocks it changes text color in all of them. Here's the CSS: CSS And I wanted to make it change color also on the background of the buttons. But I don't know how to get "inside" this "h3::after".

function kolor(color) {
  document.getElementsByTagName('body')[0].style.color = color;
  document.getElementsByTagName('h3')[0].style.h3::after.bgColor = color;
}
<h3 onmouseover="kolor('#c90000');">Red</h3>
<h3 onmouseover="kolor('#008BCC');">Blue</h3>
<h3 onmouseover="kolor('#fedf00');">Yellow</h3>
Yogi
  • 6,241
  • 3
  • 24
  • 30
Alex
  • 1
  • 2
  • 1
    Please don't post links to your code. Post the relevant code right here in your question. – Scott Marcus Nov 02 '22 at 18:20
  • Sorry but I didn't know how to format it properly to post it there – Alex Nov 02 '22 at 18:22
  • See https://stackoverflow.com/help/minimal-reproducible-example That should help you put code direct into your question. – A Haworth Nov 02 '22 at 18:27
  • Before and after pseudo elements aren’t actually in the DOM so you can’t format them in JS the way you have been trying. Look into setting a CSS variable. – A Haworth Nov 02 '22 at 18:29
  • Also see: [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – Yogi Nov 02 '22 at 18:35

0 Answers0