css .class:悬停在firefox中不工作?

vq8itlhq  于 2022-12-30  发布在  其他
关注(0)|答案(7)|浏览(120)

所以我有一些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{...}
plupiseo

plupiseo1#

我在使用Firefox时遇到过这样的问题,通过在类名中添加标记名来解决:
例如,我有一个可以在Chrome浏览器中运行但不能在Firefox浏览器中运行的程序:

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

并修正了它,使它更具体,像这样:

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

yqhsw0fo2#

http://jsfiddle.net/rE8xU/我没有看到这个问题,当鼠标移到它上面时,它确实包含下划线。这个问题的一个可能原因是类的重要性级别。例如,由其标识标签设置的样式将接管任何类样式等等。
http://htmlhelp.com/reference/css/structure.html checkout 级联顺序
最后,确保css文件被正确链接和/或嵌入,你也可以使用firefox来检查。

qqrboqgw

qqrboqgw3#

您需要将href="#”添加到您的. hover meta标记需要该链接才能设置href属性。

6jygbczu

6jygbczu4#

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

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

然后对文本进行样式化。

p.clicktext {
color: #ccc;
}

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

希望我能帮上忙)

brqmpdu1

brqmpdu15#

很有可能您的CSS中存在冲突,因为包含这段代码的jsfidle在Firefox 5中运行良好。您可能需要检查hover-pseudoclass中的ID选择器,它可能会否决这行样式。使用firebug检查它,看看继承了哪些css。

6ss1mwsb

6ss1mwsb6#

您可能会在1:未指定class(在您的情况下为clicktext),或。
2:对象aclicktext类不兼容的其他类相关联!我这么说是因为我的网站在Chrome和Firefox中都运行得很好,没有任何问题!我使用hover来产生overlay效果!这就是我正在做的:

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

我也认为标为“正确答案”的答案是不正确的。

to94eoyn

to94eoyn7#

我有同样的问题,只是不工作的火狐,快速关闭和重新启动应用程序,并再次工作。
丹尼尔

相关问题