angularjs - Angularjs/Bootstrap - 如何创建无状态按钮

Question

使用Bootstrap 和 Angularjs，我想创建一个看起来永远不会“活动”的按钮。当鼠标悬停在按钮上时，我希望按钮稍微变暗，并且我希望在单击它时它会进一步变暗。但是，当鼠标离开按钮时，我希望它恢复到原来的外观。

从语义上讲，我正在使用按钮“重置”我的应用程序的一部分。我想在点击时执行一些代码。但是，在按下它之后，按钮保持在“按下”状态是没有意义的。

这是一个活生生的例子。

有任何想法吗？

Answer 1

我会给它另一个类，比如说btn-reset并添加以下 CSS。

// the order of these two is also important
.btn-reset:hover{
    background-color: Dark !important;
}

.btn-reset:active{
    background-color: Darkest !important;
}

// you need this to reset it after it's been clicked and released
.btn-reset:focus{
    background-color: Normal !important;
}

它在这里工作http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview

问题是:focus伪类的颜色比标准按钮的颜色深，所以在单击它后它仍然有焦点，所以仍然有更深的颜色，如果你想坚持使用标准颜色，你可以为:focus伪添加一个新的选择器班级。

Answer 2

或者，您可以使用ng-mouseenterandng-mosueleave指令。

例如：

<div ng-app="ButtonApp">
    <div ng-controller="MainCtrl">
        <button ng-class="buttonClass" 
                ng-mouseenter="onMouseEnter()" 
                ng-mouseleave="onMouseLeave()"> Click Me!
    </div>
</div>

在你的控制器中：

var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){

    var defaultButtonClass = ['btn','btn-foxtrot'];
    $scope.buttonClass = defaultButtonClass;

    $scope.onMouseEnter = function(){
        $scope.buttonClass = ['btn','btn-bravo'];
    };

    $scope.onMouseLeave = function() {
        $scope.buttonClass = defaultButtonClass;
    }

}]);

你可以看到我的JSFiddle。

要生成按钮颜色，您可以使用Beautiful Buttons for Twitter Bootstrappers之类的东西。