Question

我正在尝试使用“复选框黑客”来移动和更改页面标题中的多个项目。 css伪类仅更改一项（带有段落，链接，svgs的div部分）：触发输入时检查。徽标svg，在：checked之后不会旋转。

.menu-logo-closed {
  position: absolute;
  width: 29.03px;
  height: 31.24px;
  top: 28.45px;
  right: 8%;
  display: block;
  transform: rotate(-183deg);
  z-index: 2;
  cursor: pointer;
}

.section {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.section__checkbox:checked~.menu-logo-closed {
  transform: rotate(-2.33deg);
}


/*:checked does nothing here */

.section__checkbox:checked~.section {
  opacity: 1;
  pointer-events: all;
  /*this section works*/
  position: relative;
}

path {
  stroke: black;
}

<input id="header" class="section__checkbox" type="checkbox">
<label for="header">
        <svg viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg"  alt="meniu" class="menu-logo-closed">
            <path d="M1.93321 15.5657L9.20397 32.8459C9.44027 33.3771 10.4306 33.3385 10.6249 32.7906L14.9413 19.6076C15.3642 18.2852 17.7754 18.1913 18.2999 19.4768L23.6732 32.3275C23.9095 32.8587 24.8998 32.8201 25.0941 32.2722L30.913 14.4823" stroke="white" stroke-miterlimit="10"/>
            <path d="M1.66081 8.57102L8.93161 25.8523C9.16786 26.3822 10.1582 26.3436 10.3525 25.797L14.6702 12.6465C15.0932 11.3272 17.5045 11.2334 18.0288 12.5157L23.4008 25.3338C23.6371 25.8637 24.6274 25.8251 24.8218 25.2785L30.6423 7.53231" stroke="white" stroke-miterlimit="10"/>
            <path d="M1.38844 1.57633L8.62131 17.8833C8.85639 18.3833 9.84672 18.3447 10.0422 17.828L14.388 5.39759C14.8138 4.15066 17.225 4.05676 17.7465 5.26681L23.0904 17.3623C23.3255 17.8623 24.3159 17.8237 24.5114 17.307L30.3698 0.532639" stroke="white" stroke-miterlimit="10"/>
            </svg></label>
<div class="section">
  <p class="p-first">Lorem ipsum
  </p>strong text

Answer 1

我相信您在使用:checked

后需要使用'+'进行导航

.section__checkbox:checked + label .menu-logo-closed {...}
.section__checkbox:checked + label + .section {...}

.menu-logo-closed {
  position: absolute;
  width: 29.03px;
  height: 31.24px;
  top: 28.45px;
  right: 8%;
  display: block;
  transform: rotate(-183deg);
  z-index: 2;
  cursor: pointer;
}

.section {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.section__checkbox:checked+label .menu-logo-closed {
  transform: rotate(-2.33deg);
}


/*:checked does nothing here */

.section__checkbox:checked+label+.section {
  opacity: 1;
  pointer-events: all;
  /*this section works*/
  position: relative;
}

<input id="header" class="section__checkbox" type="checkbox">
<label for="header">
        <svg viewBox="0 0 33 35" fill="none" xmlns="http://www.w3.org/2000/svg"  alt="meniu" class="menu-logo-closed">
            <path d="M1.93321 15.5657L9.20397 32.8459C9.44027 33.3771 10.4306 33.3385 10.6249 32.7906L14.9413 19.6076C15.3642 18.2852 17.7754 18.1913 18.2999 19.4768L23.6732 32.3275C23.9095 32.8587 24.8998 32.8201 25.0941 32.2722L30.913 14.4823" stroke="white" stroke-miterlimit="10"/>
            <path d="M1.66081 8.57102L8.93161 25.8523C9.16786 26.3822 10.1582 26.3436 10.3525 25.797L14.6702 12.6465C15.0932 11.3272 17.5045 11.2334 18.0288 12.5157L23.4008 25.3338C23.6371 25.8637 24.6274 25.8251 24.8218 25.2785L30.6423 7.53231" stroke="white" stroke-miterlimit="10"/>
            <path d="M1.38844 1.57633L8.62131 17.8833C8.85639 18.3833 9.84672 18.3447 10.0422 17.828L14.388 5.39759C14.8138 4.15066 17.225 4.05676 17.7465 5.26681L23.0904 17.3623C23.3255 17.8623 24.3159 17.8237 24.5114 17.307L30.3698 0.532639" stroke="black" stroke-miterlimit="10"/>
            </svg>
          </label>
<div class="section">
  <p class="p-first">Lorem ipsum
  </p>strong text
</div>

多次使用：checked伪选择器进行“复选框入侵”

1 个答案: