a: hover color not functioning properly on google chrome
css, google-chrome, html
Solution
Just as Grezzo pointed out, there seems to be something strange going on with the font. If you look at this fiddle, the left link is just like your example. I added a border to visualize the boundaries of the `a` element. There the "j" and the "p" protrudes outside this border. By adding a bottom and left padding to it (as done on the right link), the hover works as expected.
This is somewhat of a quick fix I guess, but I don't really know how to do it properly.
Problem
I wanted to make a link with CSS hover. I am using font-face to make another font with JennaSue. CSS: ``` @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; } ``` HTML: ``` <div id="australia"><a href="#">Australia</a></div> ``` The font work well on chrome but when i hover link it show like this picture: Thanks for the answer here link for you can see http://jsfiddle.net/6UdYd/1/;