Should the Cursor Property Be Set in a Rule with or Without the :Hover Pseudo-Class

Should the cursor property be set in a rule with or without the :hover pseudo-class?

Compatibility: IE6 and below only recognize the :hover pseudo class on a elements.

Should 'cursor' property be defined in '.class' or '.class:hover'?

The two selectors are for distinctly separate purposes, despite the fact that- at least in practice they appear to accomplish the same thing.

I would tend to say it would be best practice to define the hover state using :hover (at least on non-touchscreen devices, see below), because:

It makes finding and understanding your styling more apparent in larger blocks of CSS
It utilizes a specifically designated selector (which may be extended in the spec at a later date, what would then happen to your functionality?)
If you later add to the default styling for .class your states are clearly separated appropriately
What happens if you hand over responsibility of your CSS to another individual? Having :hover specific functionality defined under the correct selector makes understanding code a heck of a lot easier.
If you have more complex CSS its likely you'll be using :hover elsewhere, so should use it for the purposes of consistency
The two selectors represent the same element but in different states, semantically you should use :hover

But hang on a minute.. you may notice that if you set the cursor style for an a element to default then the usual hand icon wont appear on hover...this indicates that there is baked-in prior evidence for not specifically styling :hover states (see this in action here)

In summary, there is no game breaking reason not to use simply .class in some circumstances- it certainly uses less bytes and if you have a fairly simple setup then only under development by you...then why not, but be wary it is probably best avoided if you want to adhere to the strict rules and better support ongoing development.

In addition..lets not forget touchscreen devices MDN makes an important point here

on touch screens :hover is problematic or impossible. The :hover
pseudo-class never matches, or matches for a short moment after
touching an element. As touchscreen devices are very common, it is
important for web developer not to have content accessible only when
hovering over it, as this content would be hidden for users of such
devices.

As such depending on your requirement, it may not be best to use :hover as if you have it in your CSS for a touch screen device it may bake in reliance on unsupported or flakey functionality.

Should the CSS cursor property be set on the element itself, or on its :hover pseudo-class?

Both are "semantically" / technically correct. But happen to have the same effect in this case. I don't know why one would choose to utilize a pseudo class for it. Unless you want to change the pointer at :active only for instance.

Applying cursor:pointer with button vs button:hover

There is no real difference between the two and no problems that could come to mind. If you load up the HTML below, you can see that even if there's a hover effect used the cursor change to a pointer exactly the same as if it didn't use a transition (which is the only effect I could imagine it having). If you prefer to use :hover then you can; however it is good practice to minimise the code you write in anything.

  <html>

<head>
    <title>Pointer</title>
</head>

<body>

    <button class="pointer">Pointer</button>
    <button class="hoverPointer">Hover Pointer</button>
</body>

<style>
    .pointer {
        cursor: pointer;
    }

    .hoverPointer:hover {
        -webkit-transition: 2s;
        transition: 2s;
        cursor: pointer;
        background-color: aqua;
    }

</style>

</html>

Why a:hover does not work , if it is not declared in correct order in style sheet?

This is how CSS works (order is important). For styling links the order for pseudo-classes is:

Link (applied if you have not visited this URL)
Visited (applied if you've visited the URL the href points to)
Hover (applied if the mouse is hovering over the tag)
Active (applied if you are interacting with the tag - pressing mouse down, etc)

The reason why order is important is because of CSS Specificity. The rules you've written all have the same specificity, and therefore will be affected by order (rules written last will override earlier written rules).

Note that :hover will not work with those using a keyboard. You can provide those users with the same experience by using the :focus pseudo-class.

a:link {  color: blue;  text-decoration: none;}
a:visited {  color: purple;}
a:hover,a:focus {  text-decoration: underline;}
a:active {  color: red;}

<a href="#">This is a link</a>

Override hover pseudo class CSS attributes when specific html-class is set

Use !important.

.disabled {
    cursor:default!important;
}

IE6's !important implementation is buggy, so if you need to support it you might just be better off re-ordering your rules to get the required precedence for the .disabled class.

David Dorward raised an interesting point to note in the comments. Applying a value to cursor in a :hover pseudo-class is completely redundant. The following to rules have exactly the same effect:

.mylink { cursor:pointer; }
.mylink:hover { cursor:pointer; }

Therefore, you should avoid setting cursor in a pseudo class and stick to

.mylink { cursor:hand; }

CSS:hover and pseudo-classes in general

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!

How can I write a ':hover' condition for 'a:before' and 'a:after'?

This depends on what you're actually trying to do.

If you simply wish to apply styles to a :before pseudo-element when the a element matches a pseudo-class, you need to write a:hover:before or a:visited:before instead. Notice the pseudo-element comes after the pseudo-class (and in fact, at the very end of the entire selector). Notice also that they are two different things; calling them both "pseudo-selectors" is going to confuse you once you run into syntax problems such as this one.

If you're writing CSS3, you can denote a pseudo-element with double colons to make this distinction clearer. Hence, a:hover::before and a:visited::before. But if you're developing for legacy browsers such as IE8 and older, then you can get away with using single colons just fine.

This specific order of pseudo-classes and pseudo-elements is stated in the spec:

One pseudo-element may be appended to the last sequence of simple selectors in a selector.
A sequence of simple selectors is a chain of simple selectors that are not separated by a combinator. It always begins with a type selector or a universal selector. No other type selector or universal selector is allowed in the sequence.
A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

A pseudo-class is a simple selector. A pseudo-element, however, is not, even though it resembles a simple selector.

However, for user-action pseudo-classes such as :hover¹, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.

¹ _{Of course, this does not apply to link pseudo-classes such as :visited as in the question, since pseudo-elements aren't links.}

What is the correct way? CSS Link Pseudo-Class

Whenever in doubt go to the specs. And here's an excerpt from the specs.

Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule

What you have is correct

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

That's why this works.

This below would be incorrect.

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

That's why this doesn't work.

Should the Cursor Property Be Set in a Rule with or Without the :Hover Pseudo-Class