JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<div class="sidebar1" id="sideBar">
      <div style="height:680px" class="sidebarContainer">
    	<ul class="nav">
      		<li class="about"><a href="../architecture/about">about</a></li>
      		<li class="contact"><a href="../architecture/contact">contact</a></li>
      		<li class="barcelona"><a href="../architecture/barcelona">Campus Audiovisual</a></li>  
      		<li class="sumi"><a href="../architecture/sumi">New Case Study House</a></li>
      		<li class="london"><a href="../architecture/london">High Density, Low Rise</a></li>
    	</ul>
	  </div>
  </div>

CSS

body { 
margin:0;
padding:0;

}

.sidebar1 {
	 background-image: url("http://i.imgur.com/imdZ4TD.png");
    background-size: cover;
    background-position: center center;
  -webkit-transition: background ease-in .5s;
    -moz-transition: background ease-in .5s;
    -o-transition: background ease-in .5s;
    transition: background ease-in .5s;
	
}

ul {
	padding: 0;
	margin: 0;
	list-style-type:none;
}

ul.nav {
	text-align: right;
}

ul.nav a, ul.nav a:visited {
	display: block;
	text-decoration: none;
}

a, a:visited {
	display: block;
	text-decoration: none;
	color: #444444;
}

a:hover, a:focus {
	display: block;
	text-decoration: none;
	color: #FCB415;
}

.sidebar1.about {
 background-image: url("http://i.imgur.com/imdZ4TD.png");
    background-size: cover;
    background-position: center center;
}

.sidebar1.contact {
  background-image: url("http://i.imgur.com/v6TtaVj.png");
    background-size: cover;
    background-position: center center;
}

.sidebar1.barcelona {
 background-image: url("http://i.imgur.com/imdZ4TD.png");
    background-size: cover;
    background-position: center center;
}

.sidebar1.sumi {
 background-image: url("http://i.imgur.com/v6TtaVj.png");
    background-size: cover;
    background-position: center center;
}

.sidebar1.london {
 background-image: url("http://i.imgur.com/imdZ4TD.png");
    background-size: cover;
    background-position: center center;
}

JavaScript

// When any of the a's inside of sidebarContainer are hovered
$( ".sidebarContainer a" ).hover(function() {
  // Removes all previous classes but keeps sidebar1
  $('.sidebar1').removeClass().addClass('sidebar1');
  // Splits up the URL on the current href
  var URI = $(this).attr('href').split('/');
  console.log(URI[2]);
  // Applies the last part of the URL to sidebar1 
  $('.sidebar1').addClass(URI[2]);
});