CODEWITHSUNDEEP
javascripthtmlhoverclone
user3450906
user3450906

Reputation: 85

Replace another element content with hovered element content

I am making a periodic table of elements, and would like the content of the smaller elements to appear in the bigger element on hover. Here is an image as an example:

enter image description here

Is there a fairly simple way to do this with plain javascript?

My code structure for the smaller elements would be similar to the following:

<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>

Upvotes: 0

Views: 31

Answers (1)

E. Sundin
E. Sundin

Reputation: 4180

// 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>

Upvotes: 1

Related Questions