Question

使用Bootstrap and 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-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>

在你的控制器中：

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的内容。

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

2 个答案: