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

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

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Switch</title>
        <link rel="stylesheet" href="switchStyling.css">
    </head>
    
    <body>
    
    
        <article role="img">
    
            <div ></div>
            <div ></div>
            <div >
    
                <!-- <div > -->
                <label  for="select1">
                    <input id="select1" type="checkbox">
                    <span ></span>
                    <div >
                    </div>
                    <div ></div>
    
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
    
                </label>
            </div>
    
    
        </article>
    
    
    </body>
    
    </html>

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

CodePudding user response：

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

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Switch</title>
  <link rel="stylesheet" href="switchStyling.css">
</head>

<body>


  <article role="img">

    <div ></div>
    <div ></div>
    <div >

      <!-- <div > -->
      <label  for="select1">
                    <input id="select1" type="checkbox">
                    <span ></span>
                    <div >
                    </div>
                    <div ></div>
    
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
                    <div ></div>
    
                </label>
    </div>


  </article>


</body>

</html>