add class on hover

by lemon kazi

HTML

<div id="background">
  <div id="NewItem">
    <p> Add item </p>
  </div>
</div>

CSS

div {
  border-radius: 5px;
  transition: background-color 0.5s ease;
}

#NewItem {
  border: 1px solid #000000;
  background-color: #F0F8FF;
  Width: 100px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  z-index: 5;
  text-align: center;
}

#NewItem.active {
  background-color: #556677;
}

JavaScript

$('#NewItem').hover(function() {
  $('#NewItem').addClass('active');
});