勾选复选框悬停catBody时自定义div样式的CSS选择器问题

你原有的写法不正确，存在两处核心的选择器匹配逻辑错误，无法实现预期效果。

错误原因 #

• 第一处：相邻兄弟选择器+使用错误
  +只能选中紧接在指定元素之后、同层级的元素。查看你的HTML结构，#select1的下一个相邻同级元素是<span class="slider round">，.catBody和#select1中间隔了slider、innerCircle、sun三个同级元素，根本无法被+匹配到。
• 第二处：元素层级关系判断错误
  你写的.catBody:hover .rightEye是后代选择器，会默认.rightEye是.catBody的嵌套子元素，但实际你的HTML结构里，.rightEye、.leftEye和.catBody是平级的兄弟元素，不存在嵌套关系，后代选择器完全选不中目标。

正确实现方案 #

使用通用兄弟选择器~替代+和错误的后代选择器即可，~可以匹配指定元素后方所有符合条件的同级元素，不需要元素紧挨着。

参考CSS代码 #

/* 猫眼默认睁眼状态，保留你原有定位、配色等样式即可，这里只补全和动效相关的属性 */
.leftEye, .rightEye {
    width: 15%;
    height: 100%; /* 正常睁眼的高度，可根据你的设计调整 */
    transition: height 0.2s ease; /* 可选：加过渡让闭眼动画更自然 */
}

/* 复选框勾选+鼠标悬停在猫身上时触发闭眼效果 */
#select1:checked ~ .catBody:hover ~ .leftEye,
#select1:checked ~ .catBody:hover ~ .rightEye {
    height: 60%; /* 闭眼后的高度，要完全闭眼可以调为0或更小的数值 */
}

可选优化 #

如果你的猫眼、猫耳朵是用绝对定位叠在.catBody上层的，鼠标移到眼睛/耳朵上时可能会阻断.catBody的hover触发，加下面这段代码可以解决这个问题，让猫的整个可视区域都能触发悬停效果：

.catBody {
    pointer-events: auto;
}
.leftear, .rightear, .leftEye, .rightEye, .noise, .neck {
    pointer-events: none;
}

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