Question

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 talking about

Answer 1

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/