JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="background-divs green active"></div>
<div class="background-divs blue"></div>
<div class="background-divs yellow"></div>

<ul class="links">
	<li><a class="link" data-background="green" href="">green</a></li>
	<li><a class="link" data-background="blue" href="">blue</a></li>
	<li><a class="link" data-background="yellow" href="">yellow</a></li>
</ul>

CSS

.background-divs {
    width: 100vw;
    height: 100vh;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    left: 0;
    visibility: visible;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.background-divs.blue {
    background-color: blue;
}

.background-divs.green {
    background-color: green;
}

.background-divs.yellow {
    background-color: yellow;
}

.links {
    position: absolute;
    top: 0;
    left:0;
    z-index: 5;
}

.links  li {
    border: 1px solid white;
    margin: 30px 0;
    padding: 10px;
}

.links li a {
    color: white;
}

.active {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

JavaScript

$('.link').mouseover(function(e) {
	e.preventDefault();
	var color = $(this).attr('data-background');

	$('.background-divs').removeClass('active');
	$('.background-divs.'+color).addClass('active');

});