在href元素上添加選項卡索引導致活動類不被鈍化

我已經創建了像href元素一樣的按鈕。我已經在它上面添加了一個tabindex，以便當用戶使用製表符鍵時，他登陸按鈕。在href元素上添加選項卡索引導致活動類不被鈍化

場景：用戶單擊按鈕並將鼠標移出。主動風格仍然保留，直到外面點擊。如果我刪除標籤索引並在用戶單擊並測試鼠標後進行測試，效果消失了，這是正確的嗎？

即使在選項卡索引存在的情況下，我該如何實現相同？

<a class="button" tabindex="0">CALCULATE</a> 
.button { 
    background-color: rgb(13, 93, 166); 
    display: inline-block; 
    padding: 20px; 
    border: 1px solid blue; 
} 

.button:active, .button:focus, .button:hover { 
    background-color: rgb(96, 178, 212); 
}

https://jsfiddle.net/f2ywgcnr/

來源

2017-08-02 Hacker

或許可以從這個問題得到正確的想法 - 答案解釋它。 https://stackoverflow.com/a/11703334/4244684 – Stender

只是刪除焦點，你是好去。

只要覆蓋焦點，以防它在基類中。

.button { 
 
    background-color: rgb(13, 93, 166); 
 
    display: inline-block; 
 
    padding: 20px; 
 
    border: 1px solid blue; 
 
} 
 

 
.button:active, 
 
.button:hover { 
 
    background-color: rgb(96, 178, 212); 
 
} 
 

 

 
/* Overrite the focus */ 
 

 
.button:focus { 
 
    background-color: none; 
 
}

<a class="button" tabindex="0">CALCULATE</a>

來源

2017-08-02 08:24:27 Aslam

讓我知道這是你在找什麼。 – Aslam

我不能刪除焦點，因爲它是由我的基類來的。 – Hacker

@Hacker，只是覆蓋它。更新了代碼。 – Aslam

-2

只是CSS沒有測試，我認爲它不會滿足你的慾望我想你應該寫的jQuery/JavaScript的。您可以諮詢： http://jsfiddle.net/S7kJ2/

$('.button').click(function(){ 
 
    if($(this).hasClass('active')){ 
 
     $(this).removeClass('active') 
 
    } else { 
 
     $(this).addClass('active') 
 
    } 
 
});

.button { 
 
    float:left; 
 
    color: #333; 
 
    width: auto; 
 
    text-align: center; 
 
    padding: 0 10px; 
 
    background: #f0f0f0; 
 
    line-height: 1.5em; 
 
    height: auto; 
 
} 
 
.button.active { 
 
    background: #ea0000; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div class="button ">My button</div>

或 Keep button in active state until clicked upon again

來源

2017-08-02 09:14:43 leodao

在href元素上添加選項卡索引導致活動類不被鈍化

回答

相關問題