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 2 · Accepted Answer · edited Oct 22 '22 at 22:46

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

<div class="checkmark">
  <div class="checkmark_circle"></div>
  <div id="checkmark_stem"></div>
  <div id="checkmark_kick"></div>
</div>

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 2 · Answer 2 · edited Oct 22 '22 at 22:47

You should apply the hover condition to the .checkmark class and not the child elements

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

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

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

.checkmark: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;
}

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

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

<div class="checkmark">
  <div class="checkmark_circle"></div>
  <div id="checkmark_stem"></div>
  <div id="checkmark_kick"></div>
</div>

Changing the background when hovering via css

2 Answers2