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。

通过css悬停时更改背景

2 个答案: