AngularJS Mouse Hover and Leave Event

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
    <style>
        .pinkDiv {
            width: 100px;
            height: 100px;
            background-color: Pink;
            padding: 2px 2px 2px 2px;
        }

        .greenDiv {
            width: 100px;
            height: 100px;
            background-color: Green;
            padding: 2px 2px 2px 2px;
        }
    </style>
</head>

<body ng-app>
    <h1>Angularjs mouse hover and leave event </h1>
    <div ng-class="{pinkDiv: enter, greenDiv: leave}" ng-mouseenter="enter=true;leave=false;" ng-mouseleave="leave=true;enter=false"> Mouse <span ng-show="enter">Enter</span> <span ng-show="leave">Leave</span> </div>
</body>

</html>