title: CSS headache can't get certain buttons to change background on hover
body: <p>I work with bootstrap a lot and sometimes it's really hard to figure out why certain things don't work when you want to override certain CSS decisions bootstrap makes for you. </p>
  
  <p>So i've been trying to change the background color on a button on hover so that each button gets a different color on mouse hover. But somehow my css class doesn't override it. </p>
  
  <p>Here is what I have so far: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style type="text/css"&gt;
  .fblue_background&gt;li&gt;a:hover, .fblue_background&gt;li&gt;a:focus  {
  background-color: blue !important;
  }
  .tblue_background&gt;li&gt;a:hover, .fblue_background&gt;li&gt;a:focus  {
  background-color: blue !important;
  }
  .pred_background&gt;li&gt;a:hover, .fblue_background&gt;li&gt;a:focus  {
  background-color: red !important;
  }
  &lt;/style&gt;
  
  
  
  &lt;li&gt;&lt;a class="fblue_background" target="_blank" href="https://www.facebook.com/url"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="tblue_background" target="_blank" href="https://twitter.com/url"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a class="pred_background" target="_blank" href="https://www.pinterest.com/url"&gt;&lt;i class="fa fa-pinterest-p"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>PS: it also doesn't work when I put the class value between <code>&lt;li&gt;</code></p>