html - 模糊文本直到鼠标悬停？

Question

基本上这发生在我的主题中：单击此处查看示例。

当我将鼠标悬停在它上面时，它很快就会变得清晰明了。当我将类元素添加到我的 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;
}

​</p>

Answer 2

我不相信color: {color:hover}是有效的CSS。你可能想从那里开始。