Question

我想用CSS悬停建立链接。我正在使用font-face与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>

字体在Chrome上运行良好，但当我悬停链接时，它显示为this picture：

Hover image http://s18.postimage.org/q9j1rq4sn/before.png

感谢此处的回答链接，您可以看到http://jsfiddle.net/6UdYd/1/;

Answer 1

正如Grezzo指出的那样，字体似乎有些奇怪。如果您查看this fiddle，左侧链接就像您的示例一样。我添加了一个边框来可视化a元素的边界。那里的“j”和“p”突出于这个边界之外。通过向其添加底部和左侧填充（如右侧链接所做），悬停按预期工作。

我想这是一个快速修复，但我真的不知道如何正确地做到这一点。

Answer 2

这似乎与j的左边部分在实际字符区域的左边开始有关。请参阅此示例（可能必须使用chrome）http://jsfiddle.net/JGgHf/，其中j的左侧未包含在div中。

Answer 3

尝试添加font-weight。这似乎解决了problem。

#australia a:hover{
    color:#b30101;
    font-weight: 500;
}

另一种可能性是向左侧添加一点填充，以便在a-tag中添加文本fits。

#australia a{
    text-decoration:none;
    color:#fff;
    padding-left: 3px;
}

Answer 4

http://jsfiddle.net/rakesh_katti/n37hC/2/

您发布的代码没有错误。错误可能与其他相关元素有关。或者你正在使用它的字体。

Answer 5

尝试：

#australia a:link {
    text-decoration:none; 
    color:#fff;
}
#australia a:hover { color:#b30101; }

我发现Chrome有时会忽略我的样式，除非我使用：link伪代码。

a：悬停颜色在Google Chrome上无法正常运行

5 个答案: