how to change hover to onclick in angular?

Question

i am using css where mouse hover flip flop feature is working but i want this on click to how to achieve this.

 <div class="card-flip-front"> <div class="panel panel-default"> <div class="w3-container"> <div style="margin-left: -15px"> </div> </div> </div> </div> </div> </div> 

Answer 1

On a rough way, Is this what you are looking for?

Link to flip flop

Handled click and toggled between the required classes.

$scope.flipClasses = function() {
    //$scope.todos.push({text:$scope.todoText, done:false});
    if($scope.cardFlipFrontClass == 'card-flip-front flipped'){
    $scope.cardFlipFrontClass =  'card-flip-front';
    }
   else

    $scope.cardFlipFrontClass =  'card-flip-front flipped';

  };

I hope this should give you a basic idea on how to fit classes to suit your situation