2021-01-23 Playlist Hover

Pure HTML/CSS + JS Solution

by Ttt Yyy

HTML

<!DOCTYPE HTML> 
<html>
<head></head> 
<body>
  Pure HTML/CSS
  <div class='container'>
    <div class='leftCol'>
      Image
    </div>
    <div class='rightCol'>
      Content
      <div id='pureHTMLCSSList'>
        <div class='listItem'>
          Bulbasaur
          <img src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/bulbasaur.png'>
        </div>
        <div class='listItem'>
          Charmander
          <img src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/charmander.png'>
        </div>
        <div class='listItem'>
          Squirtle
          <img src='https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/squirtle.png'>
        </div>
      </div>
    </div>
  </div>
  
    JS Solution
  <div class='container'>
    <div id='jsLeftCol' class='leftCol'>
      Image
    </div>
    <div class='rightCol'>
      Content
      <div id='jsList'>
        <div class='pokemonName'>
          Treecko
        </div>
        <div class='pokemonName'>
          Torchic
        </div>
        <div class='pokemonName'>
          Mudkip
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS

.container {
  display: flex;
  position: relative;
}

.leftCol {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

.rightCol {
  border: 1px solid blue;
  flex: 1 1 auto;
}

.listItem > img {
  display: none;
}

.listItem:hover {
  color: gray;
}

.listItem:hover > img {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
}

.pokemonName:hover {
  color: gray;
}

.jsImage {
  position: absolute;
  left: 0;
  top: 0;
}

JavaScript

const list = document.getElementById('jsList');
// const pokemonNames = document.getElementsByClassName('pokemonName');
const listLeftCol = document.getElementById('jsLeftCol');

list.addEventListener('mouseover', event => {
  console.log('event.target', event.target);
  let image = document.createElement('IMG');
  image.className = 'jsImage'
  image.src = `https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/${event.target.innerText.toLowerCase()}.png`;
  listLeftCol.appendChild(image)
})

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

})

// does not work for some reason
/* ([...pokemonNames]).addEventListener('mouseover', event => {
  console.log('event.target', event.target);
  let image = document.createElement('IMG');
   image.src = `https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/${event.target.innerText.toLowerCase()}.png`;
  listLeftCol.appendChild(image)
  }) */