jQuery addClass example

Change class name on click in jQuery

by Владимир Коротенко

HTML

<div id="state">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}
#state {
  width: 200px;
  height: 300px;
  background-image: url(https://cdn.pixabay.com/photo/2018/07/03/11/19/empire-state-building-3513609_1280.jpg);
  background-size: cover;
  background-size: contain;
}
#state ul{
  display: block;
  margin-top: auto;
  position: fixed;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 200px;
}
#state ul li{ 
 width: 100%;
 visibility: 0; 
 height: 60px;
}
#state ul li:hover{
  visibility: 1; 
  background: rgba(0, 0, 0, .3);
}