當通過css懸停時更改背景

Question

我在圓圈中有一個複選標記，並且當您將鼠標懸停在其上時，我希望複選標記以及背景被更改。

這裏是fiddle

然而，當我去了實際對號stem和kick它不會再發生變化。

我沒有嘗試這個

#checkmark_stem:hover~#checkmark_kick { 
    background-color:white; 
    -webkit-transition: color 300ms, background 500ms, border-color 700ms; 
       transition: color 600ms, background 1000ms, border-color 1400ms; 
} 

#checkmark_kick:hover~#checkmark_stem { 
    background-color:white; 
    -webkit-transition: color 300ms, background 500ms, border-color 700ms; 
       transition: color 600ms, background 1000ms, border-color 1400ms; 
} 

#checkmark_stem:hover~#checkmark_circle { 
     background:#526F35; 
    border-color:#526F35; 
    color:transparent; 
    -webkit-transition: color 300ms, background 500ms, border-color 700ms; 
       transition: color 600ms, background 1000ms, border-color 1400ms; 
} 

但由於某種原因，它只是改變了一腳，但不是圓，它也似乎有點過於複雜，代碼行數太多。有沒有簡單的方法來做到這一點在CSS？我知道JS會很簡單。

謝謝！

Answer 1

你想用.checkmark：懸停，而不是.checkmark_circle：懸停

.checkmark { 

    display:inline-block; 
    width: 60px; 
    height:60px; 
    border-radius:50%; 
     -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 

} 

.checkmark:hover * { 
    -webkit-transition: color 300ms, background 500ms, border-color 700ms; 
       transition: color 600ms, background 1000ms, border-color 1400ms;  

} 

.checkmark:hover .checkmark_circle { 
    background:#526F35; 
    border-color:#526F35; 
    color:transparent; 

} 

.checkmark:hover #checkmark_stem { 
    background-color:white; 
} 

.checkmark:hover #checkmark_kick { 
    background-color:white; 
} 

.checkmark_circle { 
    position: absolute; 
    width:60px; 
    height:60px; 
    border-radius:50%; 
    left:0; 
    top:0; 
    border:0.15em solid #939393; 
} 

#checkmark_stem { 
    content:""; 
    position: absolute; 
    width:8.19px; 
    height:24.55px; 
    background-color:#939393; 
    left:29.7px; 
    top:16.2px; 
} 

#checkmark_kick { 
    content:""; 
    position: absolute; 
    width:8.18px; 
    height:8.18px; 
    background-color:#939393; 
    left:22.6px; 
    top:32.4px; 
} 

這裏是fiddle

Answer 2

您應該應用懸停狀態的.checkmark類，而不是子元素（見http://jsfiddle.net/jLa71sah）

所以不是.checkmark_circle:hover ~#checkmark_stem
做.checkmark:hover #checkmark_stem。