Question

点击后，我无法让我的按钮恢复到初始状态。

我希望滚动时按钮和按钮文字会改变颜色，然后再回到我点击后的状态。

这是按钮的HTML：

<a href="#portfolio" class="btn btn-primary btn-xl page-scroll">Portfolio</a>

和CSS：

section.bg-image .btn-primary {
    border: 2px solid #fff;
    background-color: rgba(0, 0, 0, 0.0);
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

section.bg-image .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #6699cc;
    background-color: #fff;
    border: 2px solid #fff;
}

Answer 1

点击后您的按钮不会恢复，因为:focus的样式与:hover和:active的样式相同。选择元素时会应用:focus（例如，点击，聚焦，通过键盘选项卡等）并保持原位直到选择另一个元素。

此外：使用CSS无法完全描述特定的行为;你不能在:hover上发生任何事情，然后点击它就会结束。在您不再悬停在元素上之前，:hover样式将始终适用。因此，如果您希望样式仅应用于mouseUp事件，则需要将这些样式放在:active伪类上。

.btn-primary {
    border: 2px solid #fff;
    background-color: rgba(0, 0, 0, 0.0);
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-primary:hover, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #6699cc;
    background-color: #fff;
    border: 2px solid #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#portfolio" class="btn btn-primary btn-xl page-scroll">Portfolio</a>

Twitter-Bootstrap按钮在单击后保持悬停状态

1 个答案: