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

Answer 2

http://jsfiddle.net/rE8xU/ 我没有看到这个问题，当它被覆盖时确实包含下划线。这个问题的一个可能原因是班级的重要程度。例如由其标识标记设置的样式将接管任何类样式等等。

最后，确保正确链接和嵌入css文件你也可以使用firefox进行检查。

Answer 3

您需要将href =“＃”添加到您的。：hover元标记需要链接才能设置href属性。

Answer 4

如果您没有超链接文本，请使用<p></p>标记。

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

然后为文本设置样式。

p.clicktext {
color: #ccc;
}

p.clicktext:hover {
text-decoration:underline;
}

希望我帮助;）

Answer 5

你CSS中的某个地方很可能存在冲突，因为具有这个确切代码的jsfiddle在Firefox 5中工作正常。你可能想检查带有hover-pseudoclass的ID选择器，它可能会否决这一行造型。用firebug检查它以查看继承的css。

Answer 6

您可能会遇到此问题 1：未指定您所用的class或clicktext。

2：对象a与其他与clicktext类不兼容的类相关联！我说这是因为我的网站在Chrome和Firefox中都可以完美运行，没有任何问题！我正在使用hover来产生overlay的效果！这就是我正在做的：

.container{
//your specifications
}
.image{
//your specifications
}
.text{
//your specifications
}
.container:hover .text{
//your specifications
}

我还认为标记为“正确答案”的答案不正确。