Javascript 用悬停的元素内容替换另一个元素内容

我正在制作元素周期表，希望较小元素的内容出现在悬停的较大元素中。以下是一幅图像作为示例：

有没有一种简单的方法可以用纯javascript实现这一点

我对较小元素的代码结构类似于以下内容：

2. 2. 他 氦 4.003 //查找所有元素 document.querySelectorAll.element.forEachnode=>{ //为每个元素添加事件侦听器 node.addEventListener'mousemove'，functione{ //简单复制元素的html 让html=this.innerHTML //用html元素填充画布 document.querySelector'canvas'.innerHTML=html } } 一 二

---

我为没有说得更清楚而道歉。我需要将多个内容发送到“canvas”。我已经更新了我的原始图像以匹配。@user3450906我已经更新了我的答案。请注意，如果希望在画布和每个元素中具有相同的html结构，则此解决方案非常简单。如果它们有不同的结构，它会变得更复杂，因为你需要将每个元素属性映射到画布属性。是的，它们有完全相同的结构。顺便说一句，我注意到这个方法不适用于IE。我认为这是因为IE不支持带有节点列表的forEach，这是querySelectorAll返回的。