Changing the background when hovering via css

Question

I have a checkmark in a circle and when you hover over it I want the checkmark as well as the background to be changed.

Here is the fiddle

However when I go over the actual checkmark stem and kick it doesn't change anymore.

I did try this

#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;
}

But for some reason it only changes the kick but not the circle and it also seems a bit too complicated and too many lines of code. Is there an easy way to do this in css? I know in JS it would be pretty simple.

Thanks!

Try this SO question: http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html — Richard Vivian, Aug 29 '15 at 19:21

score 1 · Accepted Answer · answered Aug 29 '15 at 19:29

You want to use .checkmark:hover instead of .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;
}

Here is the fiddle

The * is a wildcard for child elements. .checkmark:hover * will apply the -webkit-transition to every element inside a hovered .checkmark. That way you only have the transition once instead of on three separate lines. — Matthew Dunbar, Aug 29 '15 at 19:40

score 1 · Answer 2 · answered Aug 29 '15 at 19:30

1

You should apply the hover condition to the .checkmark class and not the child elements (see http://jsfiddle.net/jLa71sah)

So instead of .checkmark_circle:hover ~#checkmark_stem
do .checkmark:hover #checkmark_stem.

answered Aug 29 '15 at 19:30

olee

656
5
12

Changing the background when hovering via css

2 Answers2