CSS:hover and pseudo-classes in general

Question

Ref: http://stackoverflow.com/questions/1287444/forms-post-and-submit-buttons

Following on from my last question, I've attempted to style my input tags.

I tried

.as_link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:visited {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:hover {
    text-decoration: underline;
    background: #F4F0F0;
}

but read somewhere that you're not meant to select elements in this fashion for pseudo-classes so I tried:

input.as_link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:visited {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:hover {
    text-decoration: underline;
    background: #F4F0F0;
}

Still no dice on the hover. The standard does take effect but the hover does nothing. My question is this:

What are the rules on assigning pseudo-classes in general? Not just in my case above but are they only for anchors or can you use them for any elements?

Thanks in advanced.

Edit: this is not local to IE. This problem happens in Opera 9 and FF3 as well.

Edit2: I feel it has something to do with the fact hover needs link and visited prior to it. It seems as though the browsers ignore link and visted if they don't have an anchor tag around them? This is purely speculating but I wonder if it holds any merit?

Answer 1

If you're looking for rules for assigning pseudo-classes in general, this link will help you: http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

Answer 2

You can use pseudo-selectors for any element you like, whether the browser/user-agent interprets or applies them is, sadly, entirely up to them.

A detailed review of css pseudo-selectors (I couldn't find one specifically limited to pseudo-selectors) is over at: Quirksmode.

In short IE6 is a problem for :hover and :active on anything but links; IE 7 plays slightly better, but only supports :active on non-links.

IE8 seems to be pretty well up-to-spec, insofar as css2.1 pseudo-selectors go.

Answer 3

I think I just found the answer....

My code was flawed.

input.as_link:hover {
    text-decoration: underline;
    background: yellow;
}
input.as_link:focus {
    text-decoration: underline;
    background: yellow;
}
input.as_link:focus:hover {
    text-decoration: underline;
    background: yellow;
}

Underscore doesn't work because it's not "text" and the text isn't highlighted. Shame but oh well, the background colour I chose didn't show up... I guess I typed in one incorrectly (or the same as the background). The bright yellow worked.

Thanks to everyone who replied though!