title: How to override CSS :hover?
body: <p>I have this HTML code:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;Line 1&lt;/li&gt;
      &lt;li class="disabled"&gt;Line 2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the corresponding CSS is:</p>
  
  <pre><code>ul li:hover {
      color: red;
  }
  </code></pre>
  
  <p>This allows for both <code>li</code>s to be hovered over and have their color changed. But if I want one of them to be <code>disabled</code>, I’d use the following:</p>
  
  <pre><code>.disabled {
      color: grey;
  }
  </code></pre>
  
  <p>But the other CSS code’s <code>hover</code> pseudo-class still has effect. Is there any way I can override this?</p>