Question

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

1 个答案: