檢測：懸停：活動：焦點狀態

我有一個按鈕，其風格爲各種狀態。尤其是按（:hover:active）和集中（:focus）。檢測：懸停：活動：焦點狀態

但是，如果該按鈕被集中並按下，它會在Google Chrome/Safari中變爲:hover，或在Firefox中變爲:hover:active。按預期方式去:hover:active:focus。

HTML測試用例：

<button>Test</button>

CSS：

button{background:#000000;color:#FFFFFF;border:1px solid #000000;padding:10px} 
button:hover{background:#FF0000;color:#000000} 
button:active{background:#00FF00} 
button:hover:active{background:#FFFF00} 
button:focus{background:#0000FF} 
button:hover:focus{background:#FF00FF} 
button:active:focus{background:#00FFFF} 
button:hover:active:focus{background:#FFFFFF}

這裏，它是一個簡單的測試小提琴：http://jsfiddle.net/CtKs8/。請注意，在使用鍵盤聚焦按鈕（使其變爲藍色）後，按下它會使其在Chrome中變爲紅色，或在Firefox中變爲黃色（而不是白色）。

我的問題是：如何檢測按下的焦點元素（如:hover:active:focus），或者至少讓Chrome能夠像Firefox那樣使用:active:hover狀態？

來源

2013-08-29 Dave

對，對不起。我沒有注意到，我們正在處理'button'，而不是'a'。 – matewka

你有沒有試過：重點：懸停？我遇到了類似的問題，並且能夠使用僞選擇器的組合在Chrome上解決它。 – lightstrike

@lightstrike其實這個問題似乎已經在Chrome中修復了，因爲我問了這個問題。 – Dave

我相信focus，一般作爲一個事件，當你點擊一個按鈕時根本不會被解僱。當您繼續按標籤時，它會被觸發，直到您到達所需的元素。文本input和textarea是例外情況，因爲它們在單擊時關注。

我在事件文檔中找不到明確的解釋，但HERE可以看到重點事件類型文檔。其中一章有完全獨立的章節Mouse Event Types，這表明小鼠行爲與focus事件無關。

編輯：

我仔細地再次閱讀你的問題，現在我想我終於明白你的問題。當涉及到button時，不存在如下狀態：active：hover：focus。如果一個按鈕被聚焦，它會立即變得模糊（準確地說 - 在你剛剛打開它之後）。所以沒有辦法將按鈕都放在active和focus狀態。

根據Chrome/Safari上的紅色當你點擊一個焦點按鈕時，我想這是一個錯誤。如果你將一個簡單的處理程序綁定到點擊按鈕，就像here一樣，你會看到單擊一個焦點按鈕就可以工作。我不知道爲什麼:active沒有被觸發。

來源

2013-08-29 13:53:19 matewka

，但在這種情況下，單擊時*元素已被*聚焦，但'：focus'屬性似乎被刪除。 – Dave

（另外，我根本不關心事件，但只要CSS知道元素的狀態） – Dave

@Dave，請嘗試以下步驟：轉至您在問題中提供的jsfiddle，單擊_Result_區域以確保您位於正確的iframe中，然後按** Tab **鍵一次。你會看到你的按鈕將變成藍色，並且它會得到一個輪廓（默認的瀏覽器樣式） - 這意味着它的焦點。如果你點擊它，輪廓會消失，顏色會根據你應用於'：hover'和'：active'的風格而改變。我相信這是正常的行爲，而不是問題。 – matewka

檢測：懸停：活動：焦點狀態

回答

相關問題