如何同时使用CSS的:not与:hover？解决复选框选中后禁用hover效果

API 探路者

2026-7-14

解决复选框选中时禁用hover效果的问题

你的CSS选择器写法不符合语法规范，导致无法实现预期效果。.checkbox_container:not(.checkbox_container input:checked) 这种写法错误，:not()伪类不能直接嵌套包含后代元素的选择逻辑。

正确实现方案

核心思路是：仅当复选框未被选中且容器处于hover状态时，才显示.checkmarkHover；复选框选中时，无论是否hover，该元素都保持隐藏。

兼容性较好的写法（支持所有现代浏览器）

/* 默认隐藏hover状态的自定义标记 */
.checkmarkHover {
  display: none;
  /* 其他基础样式 */
}

/* 未选中状态下，容器hover时显示hover标记 */
.checkbox_container:hover input:not(:checked) ~ .checkmarkHover {
  display: block;
  /* 你的hover样式，比如蓝色背景 */
  background-color: blue;
  /* 其他自定义样式（如尺寸、边框等） */
}

/* 复选框选中时，强制隐藏hover标记（可选，确保状态覆盖） */
.checkbox_container input:checked ~ .checkmarkHover {
  display: none;
}

更直观的写法（需浏览器支持`:has()`伪类，现代浏览器均支持）

如果你使用的浏览器支持CSS :has() 伪类，可以用更简洁的逻辑实现：

.checkmarkHover {
  display: none;
}

/* 容器hover且不包含选中的复选框时，显示hover标记 */
.checkbox_container:hover:not(:has(input:checked)) .checkmarkHover {
  display: block;
  background-color: blue;
  /* 你的自定义样式 */
}