Is it possible with javascript to actually trigger with onmouseover all children elements' functions by doing only onmouseover on their parent div?

Question

I use this onmouseover function to bring one random different chemical element symbol to child span elements at each side of my 3 lines nested on on each of my parent divs.

const randomSymbols = [
"Ac","Ag","Al","Am","Ar","As","At","Au","B","Ba","Be","Bh","Bi","Bk","Br","C","Ca","Cd","Ce",
"Cf","Cl","Cm","Cn","Co","Cr","Cs","Cu","Db","Ds","Dy","Er","Es","Eu","F","Fe","Fl","Fm","Fr",
"Ga","Gd","Ge","H","He","Hf","Hg","Ho","Hs","I","In","Ir","K","Kr","La","Li","Lr","Lu","Lv",
"Mc","Md","Mg","Mn","Mo","Mt","N","Na","Nb","Nd","Ne","Nh","Ni","No","Np","O","Og","Os","P",
"Pa","Pb","Pd","Pm","Po","Pr","Pt","Pu","Ra","Rb","Re","Rf","Rg","Rh","Rn","Ru","S","Sb","Sc",
"Se","Sg","Si","Sm","Sn","Sr","Ta","Tb","Tc","Te","Th","Ti","Tl","Tm","Ts","U","V","W","Xe",
"Y","Yb","Zn","Zr",
]

const allsymbols = document.querySelectorAll(".mySymbols");

for(let symbol of allsymbols) {
    symbol.onmouseenter = function() {
       var randomNum = Math.floor(Math.random() * (randomSymbols.length))
       this.innerText = randomSymbols[randomNum]
    } 
}

Once I get those different random chemical element symbols, I use a different function to copy the whole parent div with the 6 new random chemical symbols, one for each child span element, by clicking once the parent div. Happily the copy function to copy the whole div works fine so it is not my problem, and you can see it on the JSFiddle bellow.

I started this with only 10 parent divs and it was easy to trigger this function on each of the 6 child span elements for each parent div, but now it is a nightmare to keep moving the mouse over 6 different areas on each of 900 divs.

For this reason I've been trying to find a way to trigger all 6 child elements onmouseover function, by only doing onmouseover or onmouseenter on the parent div, but every possible function I've found only edits each child element style, and none actually triggers their functions.

My hope is to find some help by asking this question to our community here.

However, if it is not possible to do this through an onmouseover or onmouseenter trigger on the parent div, I would like to ask if there is any way to bring random content for each of the 6 child span elements probably by clicking on each of the parent divs, from a different approach, of course, as I'm totally open to a complete different function, if necessary.

To make my question more clear, I created this JSFiddle
Please take a look to it, so you can understand easily my issue, and perhaps see a solution for it as well.
Thanks in advance.

Answer 1

You can also assign to your divs a 'onmouseenter' function that will dispatch a 'mouseenter' event to all the child spans of the current div:

const mouseEnterEvent = new Event("mouseenter"); // Store the event

function triggerMouseEnterOnChildSpans(className) {
  document.querySelectorAll(`.${className} > span`) // Select spans whose parent use 'className'
    .forEach(childSpan => childSpan.dispatchEvent(mouseEnterEvent));
}

document.querySelectorAll("[class^='div']") // Select elements with class starting by 'div'
  .forEach(div => div.onmouseenter = () => triggerMouseEnterOnChildSpans(div.className));

Bonus: No jQuery involved:)