title: Different hover colors when an item is clicked and not clicked in Jquery
body: <p>I want the color of the active elements to change when it's hovered, and when it's not active the hover color should be different. </p>
  
  <p>"highlightbutton" class is not removed after the "toggleclass" and I can't seem to manage to apply a code to change hover color when the item is clicked and when it's clicked back to default unclicked state it should revert back to original hover color when hovered.</p>
  
  <p>Here is my code:        </p>
  
  <pre><code>$(".toggle").hover(function() {
      $(this).addClass("highlightbutton");
  }, function() {
      $(this).removeClass("highlightbutton");
  });
  
  $(".toggle").click(function() {
      $(this).toggleClass("active");
      $(this).removeClass("highlightbutton");
  });
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.active {
      background-color: #E8F2FF;
  }
  .highlightbutton {
      background-color: #E4E4E4;
  }
  </code></pre>