2021-10-18 Playlist Hover JS

by Ttt Yyy

HTML

<!DOCTYPE HTML> 
<html>
<head></head> 
<body>
    JS Solution
  <div class='container'>
    <div class='leftCol'>
      Image
      <img class='image'/>
    </div>
    <div class='rightCol'>
      Content
      <ul id='list'>
        <li class='listItem'>
          Treecko
        </li>
        <li class='listItem'>
          Torchic
        </li>
        <li class='listItem'>
          Mudkip
        </li>
      </ul>
    </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;
}

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

JavaScript

const list = document.getElementById("list");
const listLeftCol = document.getElementsByClassName("leftCol")[0];

list.addEventListener("mouseover", event => {
  const image = document.getElementsByClassName("image")[0];
  image.src = `https://img.pokemondb.net/sprites/omega-ruby-alpha-sapphire/dex/normal/${event.target.innerText.toLowerCase()}.png`;
});

list.addEventListener("mouseout", e => {
  let image = document.getElementsByClassName("image")[0];
  image.src = "#"; // or placeholder
});