CSS的一部分仅适用于具有相同类名的多个元素之一

Question

我正在处理一个简单的小布局，我遇到了一个有趣的CSS问题。

我有两个按钮都有'按钮'类，而在我的CSS中我有

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

在第二个按钮上应用了所有css规则，但是对于第一个按钮，永远不会应用光标，也不会命中整个悬停块。

Here is an example of what i'm talking about

Answer 1

好的，找到了我的问题！对不起大家。

对于任何关心.... 我已经将css规则应用于页面上的标题文本，使其覆盖左侧的按钮，从而阻止光标“悬停”

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

Answer 2

正确应用样式，只有h3元素覆盖按钮。尝试添加position:relative; z-index:1; 我已更新了您的fiddle。