CSS懸停在chrome上沒有正確更改

Question

好吧，所以我正在爲某些Web應用程序開發某種圖庫/膳食選擇器。當我徘徊在那些田野上時，那些白色的東西，餐點應該出現在中間。這很好，但是當我將鼠標懸停在Chrome的白色字段上時，我看不到:hover對它們的影響。它仍然有效，但沒有效果。而在Firefox和IE-11完美。這是代碼鏈接。 http://codepen.io/anon/pen/yyjKBQ

代碼：

.dorucak { 
    display: none; 
} 

.dorucak + label { 
    bottom: 0px; 
    margin-right: 2px; 
    padding: 5px; 
    border: 1px solid black; 
    width: 10%; 
    background: white; 
    /*font-size: 24px;*/ 
    display: inline-block; 
} 

.dorucak:hover + label { 
    color: white; 
    background: black; 
    cursor: pointer; 
} 

.dorucak:checked + label { 
    color: white; 
    background: purple; 
} 

Answer 1

.dorucak + label:hover { 
 
\t color: white; 
 
\t background: black; 
 
\t cursor: pointer; 
 
}

Answer 2

.dorucak:hover + label:hover { 
    color: white; 
    background: black; 
    cursor: pointer; 
} 

使用Chrome我不得不添加：徘徊在兩個單選按鈕類和標籤，而現在它的工作原理。很抱歉發佈此內容並在稍後修復它。