CSS如何实现input复选框选中后永久更改悬浮、标题、图片缩放及遮罩层样式

你编写的CSS无法匹配对应DOM节点，核心问题共3点：

• 类名不匹配：HTML里的容器类名为you-coulmn-hover，但后两条CSS规则使用了不存在的类名you-coulmn-hover-1，无法选中目标元素
• 选择器结构错误：input复选框和需要修改的h4、img、遮罩层.overlay-you不是相邻兄弟节点，中间隔了label元素，使用+相邻兄弟选择器完全无法定位到目标
• 逻辑关系错误：所有需要修改的子元素都嵌套在label内部，无法直接通过input的兄弟选择器选中

利用CSS通用兄弟选择器的特性：当前input是关联label的前置兄弟元素，可先通过input:checked ~ label选中绑定的对应label，再在选择器内部嵌套定位子元素即可。勾选状态会持续生效，无需依赖悬浮交互，即可实现遮罩永久显示、样式修改的需求。

原有HTML结构无需调整

<div class="col-md-4">
  <div class="you-coulmn-hover">
     <input id="testfarben" type="checkbox" name="farbe[]" value="Testfarben">
     <label for="testfarben">
       <img src="https://i.ibb.co/CbjZbYv/testpicture.jpg">
       <h4 class="overlay-heading">TESTHEADLINE</h4>
       <div class="overlay-you"></div>
     </label>
  </div>
</div>

修正后可生效的CSS规则

/* 勾选后修改标题颜色 */
.you-coulmn-hover input:checked ~ label h4.overlay-heading {
  color: #000;
}

/* 勾选后实现图片缩放 */
.you-coulmn-hover input:checked ~ label img {
  transform: scale(1.1);
}

/* 勾选后遮罩层永久显示 */
.you-coulmn-hover input:checked ~ label .overlay-you {
  display: block;
}

如果需要保留原有悬浮交互效果，只需将原有的悬浮样式规则与上述勾选状态的样式并列编写即可，两个状态不会产生冲突。

内容的提问来源于stack exchange，提问作者Ferkan