Part of the CSS only applying to one of multiple elements with the same classname

I am just working on a simple little layout and I have run into a funny CSS issue.

I have two buttons both with the class of 'button', and in my css I have

.button {
    cursor: pointer;
    background-color: #888;
    border: solid 1px #555;
    padding: .5em 1em .5em 1em;
    font-weight: bold;
}
.button:hover {
    color: #eee;    
    background-color: #999;
    border: solid 1px #777;
}

On the second button all of the css rules are applied, however for the first button the cursor never is applied, also the entire hover block is never hit.

Here is an example of what i'm tal开发者_Go百科king about

Ok, Found my issue! Sorry everyone.

For anyone who cares.... I had applied a css rule to the header text on the page that was making it overlay the button on the left, and therefore blocking the cursor from 'hovering'

http://jsfiddle.net/rlemon/VdmS9/2/

The styles gets applied correctly, only the button is covered by h3 element. Try adding position:relative; z-index:1; I've updated your fiddle.