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

使用我想创建一个永远不会显示为“活动”的按钮。我希望鼠标在按钮上方时按钮稍微变暗，单击按钮时按钮会进一步变暗。但是，当鼠标离开按钮时，我希望它恢复到原来的外观

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

这是一个例子

---

有什么想法吗？

我会给它另一个类，比如说

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

它在这里工作

---

问题是，

：focus

伪类的颜色比标准按钮的颜色深，因此在单击它之后，它仍然具有焦点，因此仍然具有较深的颜色，如果您想坚持使用标准颜色，只需为

：focus

伪类添加一个新的选择器。

或者您可以使用

ng mouseenter

和

ng mosueleave

指令

例如：

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

你可以看到我的眼睛

---

要生成按钮颜色，您可以使用类似的东西。

看起来您现在已经有了。这似乎在Chrome开发者工具中可以使用，但我无法将其粘贴在plunkr示例中。我拼写“color”color，而不是拼写错误。

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

}]);