Custom div style when check a checkbox and hover on another div?

Question

When I check a checkbox and hover on the catBody div, I want to close cat eye(reduce the height of the eyes of the cat)

#select1:checked + .catBody:hover .rightEye{
    width: 15%;
    height: 60%;
}

I used '+' is it good way to represent the way that I want to reach the div by doing the both and concat them in this way ?

using css and html only

user_10867454 · Answer

Your selector has a couple of problems.

The plus sign selects the immediately following, not just any, sibling. You need ~ to select any following sibling.

.catBody:hover .rightEye selects any elements with class rightEye that are descendants of catBody. You want to select the one(s) that are siblings. So again use ~.

This snippet uses an orange square for the cat body and a pink square for the right eye. To prove that we have selected the correct element, the pink square is scaled when both the checkbox is ticked and the cat body is hovered.

.catBody {
  width: 200px;
  height: 200px;
  background: orange;
}

.rightEye {
  width: 100px;
  height: 100px;
  background: pink;
}

#select1:checked~.catBody:hover~.rightEye {
  transform: scaleY(60%);
}




  
  
  
  Switch

Custom div style when check a checkbox and hover on another div?

1 Answers