background-color doesn't work on dynamically inserted element

Question

I'am trying to set a floating div label to specific part of MathJax equation. That's why I must insert HTML element describing label dynamically into the code, because elements in which I want to insert the code are generated in runtime.

I am able to find the part and add floating div as label, problem is that for some reason I am not able to change the background color.

I tried plenty of different ways ("Insert it in css file, have in style when element is inserted, add it later by js) and css tags ("background", "background-color"). The style appears in element message html but background color doesnt change message appearence .

let els = document.getElementById("id").getElementsByClassName("mjx-mstyle")
for(let i = 0; i < els.length; i++){
  if(window.getComputedStyle(els[i]).color.indexOf("rgb(206, 15, 33)") >= 0 ){
    (els[i]).setAttribute("style", "color: rgb(206, 15, 33); background-color: navy; position: relative");
    (els[i]).innerHTML += 
    '<div id="message1" style="position: absolute; top: -10px; width: 100px; color: black; background-color: black">This is my text</div>' -;
    (els[i]).setAttribute("onmouseover", "document.getElementById('message1').style.display = 'block'");
    (els[i]).setAttribute("onmouseout", "document.getElementById('message1').style.display = 'none'");
  }

UPDATE:

Fiddle can be found here https://jsfiddle.net/Lqn0afxm/37/ . Message is hidden under the "x". It will appear on mouseover.

Thank you for your help.

Answer 1

您的代码外部div的高度为零，请为div设置高度，否则您也可以将溢出设置为隐藏

Answer 2

Solved: The problem was, that div inherited height of 0px from some part of MathJax. The text overflew so it was visible, but the rest of the div was invisible due to its zero volume.