title: reset hover property of css element
body: <p>I'm working on a Wordpress website and adding some custom javascript and CSS for a particular page. I'm new to CSS and after reading a lot of different entries still can't figure out the answer.</p>
  
  <p>The theme I am using sets the hover property for certain table elements and now I need to <em>unset</em> those since it is interfering with the page I am creating. If I remove the theme CSS rule then everything is fine, but the rest of the site doesn't work, plus I don't want to change the parent theme. I can't figure out how to just remove the properties of hover that are already defined. It seems that I should be able to make a more specific rule that does what I want to do, but I can't seem to get that done either. I think this is probably a simple problem but I can't seem to find the answer.</p>
  
  <p>I want to override the all rules that effect the hover characteristics of a table.</p>
  
  <pre><code>/* from the theme */
  table {
    width: 100%;
    margin: 1.62em 0 0;
    border-radius: 4px;
  }
  
  td,
  th {
    padding: .5em 1em
  }
  
  /* this is my problem rule */
  tbody tr:hover td,
  tbody tr:hover th {
    background-color: rgba(0, 0, 0, .05)
  }
  </code></pre>
  
  <p>DEMO: <a href="https://jsfiddle.net/4ty7h8oy/4/" rel="nofollow">https://jsfiddle.net/4ty7h8oy/4/</a></p>