html - .class :hover not working in firefox?

Question

所以我有一些 html:

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

我想给它一个 :hover 动画，这样:

.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;
}