單擊時刪除鏈接上的藍色輪廓，但保留TAB選擇（輔助功能）的輪廓

Question

我有一個漢堡菜單按鈕，可通過選項卡進行選擇。當我點擊它並且菜單打開時，漢堡有這個藍色的輪廓，以表明它是重點。 我不想刪除藍色輪廓，因爲它可以幫助視力受損的人以及選項卡選擇，它也很棒，但是有一種巧妙的方式可以在人們通過鼠標點擊藍色輪廓時移除藍色輪廓。只是美學...

感謝您的回答。

歡呼

Answer 1

那麼你可能需要做這種方式：

div:active, div:focus{ 
    outline: none; 
    border: none; 
} 

，也許：

*{ 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; 
} 

Answer 2

如果我理解正確的問題，請嘗試：

.myButton:active {outline: none;}

Answer 3

JS：

$('#element').click(function(){ 
    $(this).addClass('mouse'); 
}); 
$('#element').blur(function(){ 
    if($(this).hasClass('mouse'){ 
    $(this).removeClass('mouse'); 
    } 
}); 

CSS：

.mouse{ 
    outline: none; 
} 

Answer 4

正如你所指出的，藍色的輪廓在這裏的可訪問性的原因。

如果您單擊該元素，鍵盤焦點也將移動到該元素。

因此，用戶必須知道鍵盤焦點已移至該元素。

有些殘疾人士可能希望使用鼠標跳到某個特定標籤，但出於便利原因使用鍵盤。

Answer 5

這裏有一個簡單的解決方案，以純JavaScript，這些作品回到IE 10

這個答案是類似於@庫巴的答案。使用JS添加/刪除類來檢測鼠標點擊或按下標籤按鈕。

的javascript：當點擊類存在

CSS焦點：

html.clicking .targetElement:focus { 
    outline: none; 
} 

/* 
    or you can try dealing with all visibly focusable elements from the start. I'm not sure if this is all of them, but it's good starting point. 
*/ 

html.clicking a:focus, 
html.clicking button:focus, 
html.clicking input:focus, 
html.clicking textarea:focus { 
    outline: none; 
} 

瀏覽器兼容性：

querySelector IE 8+

var htmlElement = document.querySelector('html'); 

document.addEventListener('click', function(){ 
    htmlElement.classList.add('clicking'); 
}); 

document.addEventListener('keyup', function(e){ 
    if (e.keyCode === 9) { 
    htmlElement.classList.remove('clicking'); 
    } 
}); 

然後關閉輪廓上 ​​IE 10+

jQuery替代方案，如果您需要支持比IE10更老的瀏覽器。

$(document).on('click', function(){ 
    $('html').addClass('clicking'); 
}); 

$(document).on('keyup', function(){ 
    if (e.keyCode === 9) { 
    $('html').removeClass('clicking'); 
    } 
});