通过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:hover 而不是 .checkmark_circle:hover

.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。