當爲...提供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>