title: Active / unactive classes for good icon usage with CSS
body: <p>I'm doing a website where I define icons in the CSS and then I use it in HTML with a simple classes, for example this is for the dashboard:</p>
  
  <pre><code>.icon {padding-left: 22px;line-height: 16px;}
  
  .icon-dashboard {background: url("/img/icons/dashboard_off.png") no-repeat}
  .icon-dashboard:hover, .icon-dashboard:active {background: url("/img/icons/dashboard_on.png") no-repeat}
  </code></pre>
  
  <p>Then I can use it:</p>
  
  <pre><code>&lt;a class="icon icon-dashboard" href="index.html"&gt;Dashboard&lt;/a&gt;
  </code></pre>
  
  <p>Now I have an <code>anchor</code> with a icon that, when I hover takes color (off=b&amp;w, on=color). That's ok, all my menu is by default in off state and when hovered to on state.</p>
  
  <p>The problem: this icons are for display a submenu when click that, by default, is hidden. When I click on a <code>anchor</code> with <code>.icon</code> the next <code>&lt;div /&gt;</code> is showed. That's ok, but then when I move throw this <code>&lt;div /&gt;</code> the anchor, of course, is in off state.</p>
  
  <p>I need to add a class, or something, that mantains the icon of the <code>anchor</code> in "on" state but I want to know if is possible to do it without rewriting the class like <code>icon-dashboard-active</code>. One of the main reasons is because I want to add in javascript, when clicked, a class that automatically converts to "on" state.</p>
  
  <p>I wish this is better explained.</p>
  
  <p>Thank you in advance!</p>