JSFiddle - React, Tailwind, and code Playground

Playlist Hover JS Solution

by Ttt Yyy

HTML

<!DOCTYPE HTML> 
<!-- <head /> 
<body> -->
  <div class='container'>
  <div class="leftCol">
    <div>
       Image
    </div>
    <!-- <img id='imageToChange'/> -->
  </div>
  <div class='rightCol'>
  Content
    <ul id='pokemonList'>
    <li class='pokemonName'>
       Treecko
    </li>
     <li class='pokemonName'>
       Torchic
    </li>
     <li class='pokemonName'>
       Mudkip
    </li>
  </ul>
  </div>
  <div id='console' /> 
  </div>
 
<!--  </body>-->

CSS

.container {
  display: flex;
}
 
.leftCol {
  width: 100px;
  border: 1px solid green;
}

.rightCol {
  margin: none;
  flex: 1 1 auto;
  border: 1px solid red;
}

/* li > img {
  display: none;
}

li:hover img {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
} */

JavaScript

/* src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/totodile.png' */
let list = document.getElementById('pokemonList')
let console = document.getElementById('console');
/* let image = document.getElementById('imageToChange')*/ 
let leftCol = document.getElementsByClassName('leftCol')[0]

// can only use mouseover here, since it is delegation and mouseenter does not sense child nodes;
list.addEventListener('mouseover', (e) => {
  if(e.target.tagName === 'LI') {
  	let image = document.createElement('IMG')
    image.className = 'image'
    image.src = `https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/${e.target.innerText.toLowerCase()}.png`
    leftCol.appendChild(image)
  }

})

list.addEventListener('mouseout', (e) => {
		let image = document.getElementsByClassName('image')[0]
    // image.src = ``
   if(image != null) {
   leftCol.removeChild(image)
   }
   

})


let children = list.childNodes;
children.forEach(element => {
	// can use mouseover or mouseenter here
  element.addEventListener('mouseenter', (e) => {
     // image.src = `https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/${e.target.innerText.toLowerCase()}.png`
  })
})

// not sure why below selector doesn't work...
/* let listItems = document.getElementsByClassName('pokemonName')

listItems.forEach(element => {
  element.addEventListener('mouseover', (e) => {
    console.innerHTML = element.innerHTML;
     image.src = `https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/${e.target.innerText.toLowerCase()}.png`
  })
}) */