.class：hover not working in firefox？ [英] .class:hover not working in firefox?

问题描述

我有一些html：

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

，我想给它一个：hover动画，如下：

and i want to give it a :hover animation, as so:

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

只要说，它在Mozilla Firefox 5中不起作用，在Chrome和Safari中运行良好。但是，如果我将它更改为

Suffice to say, it does not work in Mozilla Firefox 5, even though it works perfectly well in Chrome and Safari. However, if i change it to

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

它在Mozilla Firefox 5中工作得很好！我没有设法找到任何有关这个在线。

It works perfectly fine in Mozilla Firefox 5! I have not managed to find anything regarding this online.

我当然可以改变我的样式来应用于a而不是.clicktext。问题是，它会扭曲我的约定，这是（尽可能）应用所有的样式到类，而不是标签名称。毕竟，我有很多其他的标签，我不想让这个underline-on-hover的东西出现。

I could, of course, just change my styles to apply to the a rather than the .clicktext. The problem with that is that it would screw up my conventions, which is (as far as possible) apply all the styles to classes rather than to the tag names. After all, I have many other tags for which i do not want this underline-on-hover thing to appear.

有人碰到这个，也许发现一个很好的解？

Has anyone bumped into this, and perhaps found a nice solution?

编辑：这些也不起作用

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

推荐答案

我有这些类型的问题与Firefox和解决它通过添加标签名称到类名：

I had these kind of problems with Firefox and solved it by adding the tag name to class name:

例如我有这个工作在Chrome中但不在Firefox中：

for example I had this which worked in Chrome but not in Firefox:

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

并通过更具体的方式修复它：

and fixed it by making it more specific like this:

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

这篇关于.class：hover not working in firefox？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！