title: ``hover state works in inspector but not in the actual browser
body: <p>I am having issues with some divs who are supposed to change from a background image to a background color when hovered. If you try to run my piece of code I posted below you will find that it works, however i am using the same code on <a href="http://www.pieterswebdesign.com/desktop/index.html" rel="nofollow">www.pieterswebdesign.com/desktop/index.html</a> and there if i hover the images on the site nothing happens.... </p>
  
  <p>Also when you force the hover state in the inspector it does work...
  anybody knows the issue here?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#kijker1div {
    width: 55%;
    padding-bottom: 31.5%;
    position: relative;
    float: left;
    margin-right: .5%;
    background-image: url(images/kijker1.png);
    background-size: cover;
    text-align: center;
  }
  #kijker2div {
    width: 44.5%;
    padding-bottom: 40%;
    position: relative;
    float: left;
    margin-bottom: 1.25%;
    background-image: url(images/kijker2.png);
    background-size: cover;
    background-position: 50%;
    text-align: center;
  }
  #kijker3div {
    width: 55%;
    padding-bottom: 37%;
    position: relative;
    float: left;
    margin-top: -9.25%;
    margin-right: .5%;
    background-image: url(images/kijker3.png);
    background-size: cover;
    text-align: center;
  }
  #kijker4div {
    width: 44.5%;
    padding-bottom: 28.5%;
    margin-top: -.75%;
    position: relative;
    float: left;
    background-image: url(images/kijker4.png);
    background-size: cover;
    background-position: 50% 50%;
    text-align: center;
  }
  #kijker1div:hover {
    background-color: #3498db;
    background-image: none;
  }
  #kijker2div:hover {
    background-color: #e74c3c;
    background-image: none;
  }
  #kijker3div:hover {
    background-color: #9b59b6;
    background-image: none;
  }
  #kijker4div:hover {
    background-color: #1abc9c;
    background-image: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div id="kijker1div" class="kijkerdiv"&gt;&lt;/div&gt;
    &lt;div id="kijker2div" class="kijkerdiv"&gt;&lt;/div&gt;
    &lt;div id="kijker3div" class="kijkerdiv"&gt;&lt;/div&gt;
    &lt;div id="kijker4div" class="kijkerdiv"&gt;&lt;/div&gt;
  
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>