当提供 for...id 时，停止悬停在输入标签上以激活输入的悬停样式

Question

我不确定是否所有浏览器都这样做，但如果我在与输入的 id 相对应的标签上提供 for 属性，这会使悬停在标签上触发输入的悬停在我的情况下不受欢迎的样式。有什么方法可以阻止这种行为，同时屏幕阅读器仍然可以访问表单？

.field label {
  display: block;
  margin: 0 0 0.5em 0;
}
.field input {
  background: white;
  border: 1px solid #999;
  border-radius: 0px;
  color: black;
  display: inline-block;
  padding: 0.5em 0.7em
}
.field input:hover {
  background: #efefff;
  border-color: #333;
}

<div class="field">
  <label for="myInput">Hover over this label:</label>
  <input id="myInput" type="text">
</div>

Answer 1

您可以使用 pointer-events:none; 禁用任何元素的悬停效果。

.field label {
  display: block;
  margin: 0 0 0.5em 0;
  pointer-events:none;

}
.field input {
  background: white;
  border: 1px solid #999;
  border-radius: 0px;
  color: black;
  display: inline-block;
  padding: 0.5em 0.7em
}
.field input:hover {
  background: #efefff;
  border-color: #333;
}

<div class="field">
  <label for="myInput">Hover over this label:</label>
  <input id="myInput" type="text">
</div>

当提供 for...id 时，停止悬停在输入标签上以激活输入的悬停样式

Stop hovering over input label from activing the input's hover styles when for...id is provided

html

css

hover

wai-aria