use：focus as：懸停替換鍵盤導航

WCAG 2.0建議還使用:focus當:hover用於鏈接元素以支持鍵盤導航。這適用於鏈接元素，但兩者之間有一些差異。use：focus as：懸停替換鍵盤導航

任何元素都可以有:hover狀態，而只有極少數能懸停在一個元素時集中
，也將鼠標懸停在其所有的父元素。這與焦點並非如此

這個問題是嚴格關於CSS。有沒有辦法模擬鍵盤導航:hover（如上所述）的行爲？或者有沒有強烈的理由爲什麼不想要那樣？

爲了讓更多在這裏明確的是一個例子：

HTML：

<div id="box"> 
    foo bar 
    <a href="#">click me</a> 
</div>

CSS：

#box { 
    opacity: 0.3; 
} 
#box:hover { 
    opacity: 1; 
} 
#box a:focus { 
    opacity: 1; 
}

當使用鼠標時，我會使用它之前將鼠標懸停在鏈接元素。由於:hover狀態向上傳播#box將完全不透明。

當使用鍵盤時，我會在使用它之前關注鏈接元素。由於:focus狀態不是向上傳播#box將而不是是完全不透明的。

來源

2013-10-22 tobib

非常有趣......但我非常確定'opacity'只是不能在'：focus'上工作，而不是反過來。基於我所知道的，你只能改變一些屬性，比如'：active' /'：focus' /'：visited' ..我可能是錯的，但是..見http://jsfiddle.net/8G4bY/...編輯...看起來好像'opacity'在少數情況下工作.. http://jsfiddle.net/GcxMk/ –

[angular-deep-blur]（https://github.com/ myplanet/angular-deep-blur）有點相關。它檢查被聚焦的元素是否在指定的子樹中，並且從該子樹中的每個模糊事件中隨時執行代碼。 – tobib

這可以用JavaScript來完成與focusin/focusout事件（它們就像focus和blur除了它們氣泡）。 Here是一個小提琴。

它歸結爲這樣的功能：

var deepFocus = function(element, cls) { 
    cls = cls || 'deep-focus'; 

    element 
     .on('focusin', function() { 
      element.addClass(cls); 
     }) 
     .on('focusout', function() { 
      var value = !!element.find(':focus').length; 
      element.toggleClass(cls, value); 
     }); 
};

更新：有是包含:focus-within選擇這將究竟做什麼這裏需要一個規範草案。

來源

2015-05-22 07:33:33 tobib

要使：對元素的焦點效果不鏈接，並且需要在tabindex屬性中使用表單元素。當你把它放在每個元素上時，你可以給它分配：focus pesudo元素。

在您的示例中，您需要明白，如果鏈接不透明度更改，則不透明度仍留在父div上。

你可以看到工作樣品here。或樣品使用的tabindex

<div tabindex="1">Touch the Div</div>

來源

2013-12-24 14:29:06

感謝您的回答。不過，我希望能回答我的問題的第二部分。 – tobib

嘗試再次解釋我的第二部分 –

當您將鼠標懸停在某個元素上時，您還將鼠標懸停在其所有父元素上。焦點並非如此。有沒有什麼辦法可以模擬焦點的懸停行爲？ – tobib

use：focus as：懸停替換鍵盤導航

回答

相關問題