Stoppen Sie den Mauszeiger über Eingabe-Label von der Aktivierung der Hover-Stile der Eingabe, wenn für ... ID bereitgestellt wird

Question

Ich bin nicht sicher, ob alle Browser dies tun, aber wenn ich ein for Attribut auf einer Bezeichnung id dieses eine Eingabe bereitstellt Wenn Sie den Mauszeiger über das Label bewegen, werden die Hover-Stile der Eingabe ausgelöst, was in meinem Fall unerwünscht ist. Gibt es eine Möglichkeit, dieses Verhalten zu stoppen, während ein Formular weiterhin für Bildschirmleseprogramme verfügbar ist?

.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

können Sie pointer-events:none; verwenden Hover-Effekt für jedes Element zu deaktivieren.

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