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

Question

我正在制作周期性的 table 元素，并希望较小元素的内容在悬停时显示在较大元素中。这是一个图像示例：

有没有一种相当简单的方法可以用 javascript 做到这一点？

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

<li class="element">
  <ul class="elec-state">
    <li>2</li>
  </ul>
  <span class="number">2</span>
  <h2 class="abv">He</h2>
  <h4 class="name">Helium</h4>
  <span class="weight">4.003</span>
</li>

Answer 1

// Find all elements
document.querySelectorAll('.element').forEach(node => {
  // Add event listener for each element
  node.addEventListener('mousemove', function(e) {

    // Plain copy the html of the element
    let html = this.innerHTML

    // Fill canvas with elements html
    document.querySelector('#canvas').innerHTML = html
  })
})

<button id="canvas"></button>
<br>
<button class="element"><span class="abv">One</span></button>
<button class="element"><span class="abv">Two</span></button>
<button class="element"><span class="abv">Three</span></button>

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

Replace another element content with hovered element content

html

javascript

clone

hover