Question

So i have some html:

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

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

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

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

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

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?

edit: these also do not work

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

Answer 1

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

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