如何仅修改CSS抑制关联<label>与<input>的联动hover效果（禁用pointer-events:none）

当<label>与<input>通过for和id关联时，浏览器默认会将<label>的悬停状态关联到对应<input>，导致hover<label>时<input>的:hover样式也会触发。要实现仅当<input>自身被悬停时才改变边框样式，且不能使用pointer-events: none，可通过以下CSS修改实现：

/* 定义input的默认边框样式，可根据实际需求调整 */
input {
  border: 1px solid #ccc;
}

/* 仅在input自身被悬停时应用红色边框 */
input:hover {
  border: 1px solid red;
}

/* 当关联的label被悬停时，重置input边框为默认样式，抵消hover效果 */
label[for="foo"]:hover ~ div > input#foo {
  border: 1px solid #ccc;
}

原理说明 #

1. 先给<input>设置明确的默认边框样式，确保后续重置时有可恢复的基准样式。
2. 当<input>自身被鼠标悬停时，input:hover规则生效，边框变为红色。
3. 利用兄弟选择器~定位到<label>所在<div>的后续同级<div>内的关联<input>，当<label>被悬停时，将<input>边框重置为默认样式，覆盖掉input:hover的触发效果。

如果你的HTML结构与示例不同，只需调整选择器部分，确保能准确选中与<label>关联的<input>即可。

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