Question

我在href元素上创建了一个像感觉一样的按钮。我在它上面添加了一个tabindex，这样当用户使用标签键时，他就会按下按钮。

场景：用户点击按钮并将鼠标移出。活动样式仍然保留，直到在外面点击。如果我删除了标签索引并在用户点击后测试并将鼠标移出，效果就消失了，这是对的吗？

即使有标签索引，我怎样才能实现相同目标？

<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

只需删除焦点就可以了。

只要在基类中重写焦点。

＆＃13;

select

＆＃13;

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

＆＃13;

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元素上添加选项卡索引，导致活动类不被取消激活

2 个答案: