提供for…id时，不要将鼠标悬停在输入标签上，无法激活输入的悬停样式。

Question

I'm not sure if all browsers do this but if I provide a for attribute on a label that corresponds to an input's id , this makes hovering over the label trigger the input's hover styles which is undesirable in my case. Is there any way to stop this behavior while still having a form accessible to screen readers?

 .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

You can use pointer-events:none; to disable hover effect for any element.

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