title: a: hover color not functioning properly on google chrome
body: <p>I wanted to make a link with CSS hover. I am using font-face to make another font with JennaSue.</p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>@font-face {
      font-family:JennaSue1;
      src: url(font/JennaSue.otf);  
  } 
   @font-face {
      font-family:JennaSue3;
      src: url(font/JennaSue.ttf);  
  } 
  @font-face {
      font-family:JennaSue2;
      src: url(font/JennaSue.eot);  
  } 
  
  #australia {
      position:absolute;
      font-size:40px; 
      left:0px; 
      top:32px; 
      color:#fff; 
      font-family: JennaSue1,JennaSue2,JennaSue3;
  }
  #australia a {
      text-decoration:none; 
      color:#fff;}
  #australia a:hover { color:#b30101; }   
  </code></pre>
  
  <p>HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="australia"&gt;&lt;a href="#"&gt;Australia&lt;/a&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The font work well on chrome but when i hover link it show like <a href="https://s18.postimg.cc/igsdzqytj/before.png" rel="nofollow noreferrer">this picture</a>:</p>
  
  <p><a href="https://i.stack.imgur.com/Eu4Lh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Eu4Lh.png" alt="Hover image"></a></p>
  
  <p>Thanks for the answer here link for you can see <a href="http://jsfiddle.net/6UdYd/1/" rel="nofollow noreferrer">http://jsfiddle.net/6UdYd/1/</a>;</p>