jQuery addClass example

Change class name on click in jQuery

by joshmoto

HTML

<div class="sthero-wrapper">
  <div class="sthero-whitebar">
    <div class="sthero-whitebar-text-contianer">
      <div id="sthero-whitebar-copy">
        Who do you want to ship to ?
      </div>
      <div id="sthero-whitebar-client-copy"> CLIENT'S</div>
      <div id="sthero-whitebar-heros-copy">HERO'S</div>
      <div id="sthero-whitebar-family-copy">FAMILY</div>
    </div>
  </div>
  <div id="sthero-client-image">

  </div>
  <div class="sthero-heros-image"></div>
  <div class="sthero-family-image"></div>
  <div class="sthero-clear"></div>
</div>

CSS

.sthero-wrapper {
  height: 420px;
  width: 1220px;
}

.sthero-whitebar-hide {
  display: block;
}

.sthero-whitebar {
  width: 1220px;
  height: 100px;
  text-align: center;
  background: rgba(255, 255, 255, .7);
  position: absolute;
  top: 30%;
  left: 1.5%;
  transform: translate(-.75%, -30%);
}

.sthero-whitebar-text-contianer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#sthero-whitebar-copy {
  font-family: 'exo 2';
  font-size: 42px;
  color: #000;
  display: block;
}

#sthero-whitebar-client-copy {
  font-family: 'exo 2';
  font-size: 42px;
  color: #000;
  display: none;
}

#sthero-whitebar-heros-copy {
  font-family: 'exo 2';
  font-size: 42px;
  color: #000;
  display: none;
}

#sthero-whitebar-family-copy {
  font-family: 'exo 2';
  font-size: 42px;
  color: #000;
  display: none;
}

#sthero-client-image {
  background-image: url(clients-100.jpg);
  background-repeat: no-repeat;
  height: 420px;
  width: 362px;
  float: left;
}

#sthero-client-image:hover {
  background-image: url(50client-100.jpg);
  background-repeat: no-repeat;
  height: 420px;
  width: 362px;
  float: left;
}

.sthero-heros-image {
  background-image: url(heros-100.jpg);
  background-repeat: no-repeat;
  height: 420px;
  width: 450px;
  float: left;
}

.sthero-heros-image:hover {
  background-image: url(50hero-100.jpg);
  background-repeat: no-repeat;
  height: 420px;
  width: 450px;
  float: left;
}

.sthero-family-image {
  background-image: url(family-100.jpg);
  background-repeat: no-repeat;
  height: 420px;
  width: 408px;
  float: left;
}

.sthero-family-image:hover {
  background-image: url(50family-100.jpg);
  background-repeat: no-repeat;
  height: 420px;
  width: 408px;
  float: left;
}

.sthero-clear {
  clear: both;
}

JavaScript

$("#sthero-client-image").hover(function() {
  $("#sthero-whitebar-copy").css("display","none");
  $("#sthero-whitebar-client-copy").css("display","block");
}, function() {
  // on mouseout, reset the background colour
  $("#sthero-whitebar-copy").css("display","block");
  $("#sthero-whitebar-client-copy").css("display","none");
});