.class:悬停不在Firefox中工作？

Question

所以我有一些HTML:

<a class='clicktext'>...read more!</a>

我想给它一个:悬停动画,如下:

.clicktext{
}
.clicktext:hover{
    text-decoration:underline;
}
.clicktext:active{
    text-decoration:none;
}

可以说,它在Mozilla Firefox 5中不起作用,尽管它在Chrome和Safari中运行得非常好.但是,如果我将其更改为

a{
}
a:hover{
    text-decoration:underline;
}
a:active{
    text-decoration:none;
}

它在Mozilla Firefox 5中运行得非常好!我还没有找到任何有关此在线的信息.

当然,我可以改变我的样式以应用于a而不是.clicktext.问题在于它会搞砸我的约定,这些约定(尽可能)将所有样式应用于类而不是标记名称.毕竟,我还有许多其他标签,我不希望这种标记出现在下划线上.

有没有人碰到这个,也许找到了一个很好的解决方案？

编辑:这些也行不通

.clicktext a:hover{...}
a .clicktext:hover{...}

Answer 1

我在Firefox中遇到了这些问题,并通过在类名中添加标记名来解决它:

例如,我有这个在Chrome中工作但在Firefox中没有:

.content .sidebar:hover{
    background-color: red;
}

并通过使其更具体如下来修复它:

div.content div.sidebar:hover{
    background-color: red;
}