在 href 元素上添加选项卡索引导致活动 class 不被停用

Question

我在 href 元素上创建了一个类似 feel 的按钮。我在上面添加了一个 tabindex，这样当用户使用 tabs 键时，他就会落在按钮上。

场景：用户点击按钮并取出鼠标。在外部单击之前，活动样式仍然存在。如果我删除选项卡索引并在用户单击并移出鼠标后进行测试，效果就消失了，对吗？

即使有选项卡索引，我怎样才能达到同样的效果？

<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/

Answer 1

只需移除焦点即可。

只需覆盖焦点，以防它位于基础 class。

.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>

Answer 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

在 href 元素上添加选项卡索引导致活动 class 不被停用

Adding tab index on a href element causing the active class not to be deactiavted

html

css

tabindex