title: On Hover(content css tag) is not working in Firefox and IE
body: <p>I have used content tag in css for the on hover function as I have given an id to the image tag.But, the on Hover is not working in Firefox and IE and it's working fine in chrome. Here is the link to this : <a href="http://thunderstorm999.byethost9.com" rel="nofollow">thunderstorm999.byethost9.com</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#explore:hover {
      content: url('images/explore-hover.png');
  }
  #material:hover {
      content: url('images/material-hover.png');
  }
  #team:hover {
      content: url('images/team-hover.png');
  }
  #contact:hover {
      content: url('images/contact-hover.png');
  }
  #merchandise:hover {
      content: url('images/merchandise-hover.png');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="navigation"&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img id="explore" src="images\explore.png"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img id="material" src="images\material.png"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img id="team" src="images\team.png"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img id="contact" src="images\contact.png"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img id="merchandise" src="images\merchandise.png"/&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>