title: Active class state not working
body: <p>I have the following rules which apply an active and hover state to a li element:</p>
  
  <pre><code>.toolbar ul li.plus {
      background-position: 0 -170px;
  }
  .toolbar ul li.plus:hover, li.plus.active {
      background-position: -34px -170px;
  </code></pre>
  
  <p>Now my HTML markup works when I hover over it:</p>
  
  <pre><code>&lt;li class="plus"&gt;&lt;a href="#" data-content="Add property to shortlist" data-trigger="hover" title=""&gt;link&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>however, if I want to explicitly active it won't work with the following:</p>
  
  <pre><code>&lt;li class="plus active"&gt;&lt;a href="#" data-content="Add property to shortlist" data-trigger="hover" title=""&gt;link&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>Any help will be much appreciated. </p>