僅適用於具有相同類名的多個元素之一的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。