Hover Image Change

by Ford Heacock

HTML

<div id="myDiv">
  <ul id="ul">
    <li id="liOne"></li>
    <li id="liTwo"></li>
    <li id="liThree"></li>
  </ul>
</div>

CSS

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#myDiv {
  height: 100%;
  width: 500px;
  background-color: black;
  transition: 1s;
}

ul {
  list-style: none;
  display: inline;
}

li {
  display: inline-block;
  opacity: 0;
}

#liOne {
  transition: .5s;
  height: 100vh;
  width: 33%;
  background-color: blue;
}

#liTwo {
  transition: .5s;
  height: 100vh;
  width: 33%;
  background-color: yellow;
}

#liThree {
  transition: .5s;
  height: 100vh;
  width: 33%;
  background-color: orange;
}

.active {
  opacity: 1;
}

.not-active {
  opacity: 0;
}

JavaScript

const one = document.querySelector('#liOne');
const two = document.querySelector('#liTwo');
const three = document.querySelector('#liThree');
const myDiv = document.querySelector('#myDiv');
const items = document.querySelectorAll('li');
let current;

$(one).hover(function(){
	myDiv.style.backgroundColor = "orange";
});

$(two).hover(function(){
	myDiv.style.backgroundColor = "green";
});

$(three).hover(function(){
	myDiv.style.backgroundColor = "purple";
});

items.forEach(item => item.addEventListener('mouseenter', checkIfActive));

function checkIfActive(){
	if(current === this.id){
  	return;
  }
	current = this.id;
	if (!$(this).hasClass('active')){
  	$(this).removeClass('not-active');
    $(this).siblings().removeClass('active');
  	$(this).addClass('active');
  } else {
  	$(this).removeClass('active');
    $(this).addClass('not-active');
  } 
}