html - 鼠标悬停之前文本模糊？

Question

基本上这发生在我的主题中:Click here to view an example .

当我将鼠标悬停在它上面时，它很快就会变得清晰明了。当我将类元素添加到我的 html 时，我注意到这个问题开始出现，如下所示:

a.navigation{
    color: {color:text};
    font-family: 'Georgia', sans-serif;
    font-size:15px;
    text-transform:lowercase;
    letter-spacing:2px;
}
a.navigation:hover:{
    color: {color:hover} !important;
    cursor: crosshair;
    text-decoration:none;
}
<a href="/" class="navigation">Entries</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/ask" class="navigation">Message</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/archive" class="navigation">Records<a/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/rss" class="navigation">Feed</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="/theme" class="navigation">Theme</a>

知道为什么这个链接会影响我主题中的其他链接吗？非常感谢。抱歉，如果这是初学者的问题。

Answer 1

我不确定，但你的 CSS 有一些错误:

a.navigation{
color: {color:text};
font-family: 'Georgia', sans-serif;
font-size:15px;
text-transform:lowercase;
letter-spacing:2px;
}
a.navigation:hover:{
color: {color:hover} !important;
cursor: crosshair;
text-decoration:none;

这是什么 color: {color:text}; 和 color: {color:hover} !important; ???例如，它应该是 color: blue;。

这里 a.navigation:hover:{ 中还有另一个“:”。它应该是 a.navigation:hover{你忘了关闭 a.navigation:hover{ }

如有帮助请回复

a.navigation{
    color: blue;
    font-family: 'Georgia', sans-serif;
    font-size:15px;
    text-transform:lowercase;
    letter-spacing:2px;
}

a.navigation:hover{
    color: red !important;
    cursor: crosshair;
    text-decoration:none;
}