Internet Explorer 10+上輸入元素懸停的問題

讓我們有一個label元素，其中for屬性正確指定。此標籤稍後將對點擊事件進行一些操作綁定，因此我們希望在懸停時更改標籤的外觀以指示單擊該選項的選項。Internet Explorer 10+上輸入元素懸停的問題

但是，如果您打開IE 10/11並將光標放在標籤的相應輸入元素上，則標籤的:hover僞類將激活！

我試過floatng的標籤和輸入和設置位置：絕對。我能找到的唯一解決方案是更改/刪除標籤的for或輸入的id，因此它們不會相互連接。但這不是一個好的解決方案，因爲它會在語義上斷開這兩個元素，並可能導致屏幕閱讀器出現問題。有沒有其他方法可以解決這個錯誤？

的jsfiddle：fiddle

JSFidde碎了-ID鏈接：fiddle

來源

2014-06-06 megapctr

您的第一個鏈接（我用IE 11） – pietro

我在IE11和我看到的問題與IE瀏覽器沒有問題。 – James

你不必使用「爲」在所有如果你改變你的HTML結構一點點。是的，標籤和輸入仍然「連接」。

<div> 
    <label> 
    <span>label</span> 
    <input id="test" type="text"> 
    </label> 
</div>

這裏是例子：

http://jsfiddle.net/Vq8kN/8/

，如果你想你可以用2線的jQuery你的目標（我不知道，如果你可以用它）

來源

2014-06-06 08:10:58 otopic

工作demo

$("input").hover(function(){ 
    $("label").removeClass('hovertest'); 
}).mouseout(function(){ 
    $("label").addClass('hovertest'); 
});

CSS

div { 
    margin: 1em auto; 
    width: 300px; 
    padding: 0.2em; 
    border: 1px dotted black; 
} 
label { 
    padding: 0.2em 1em; 
} 
input { 
    width: 200px; 
} 
.hovertest:hover { 
    background: #ccc; 
    cursor: pointer; 
}

HTML

<div> 
    <label class="hovertest" for="test">label</label> 
    <input id="test" type="text"/> 
</div>

來源

2014-06-06 09:49:16 faby

Internet Explorer 10+上輸入元素懸停的問題

回答

相關問題