title: How to disable hover effect from a css file?
body: <p>How can I disable the hover effect from a <code>css</code> file, and get a second `css file's hover attribute to work on the html element.</p>
  
  <p><strong>Html -</strong></p>
  
  <pre><code>&lt;p&gt;
      &lt;a href="" title=""&gt;demo hover&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>a:hover{
      color:#000;
      background: #ccc;
      border:none;
     /*Here can be more styling*/ 
  }
  </code></pre>
  
  <p><strong>style_new.css</strong></p>
  
  <pre><code>a:hover{
      color:green;
      background: #ccc;
      border:none;
      padding:4px;
     /*Here can be more styling*/ 
  }
  </code></pre>
  
  <p>Now according to the above code I want the <code>style.css</code> hover effect to be disabled. Note that I can't change the <code>style.css</code>.</p>