Create a custom directive that changes the background color of an element when hovered over using angular js.

<div ng-app="directiveApp" ng-controller="DirectiveController">
    <div my-directive>Hover me</div>
</div>

<script>
    var app = angular.module('directiveApp', []);
    app.controller('DirectiveController', function($scope) {});

    app.directive('myDirective', function() {
        return {
            restrict: 'A',
            link: function(scope, element) {
                element.on('mouseenter', function() {
                    element.css('background-color', 'lightblue');
                });

                element.on('mouseleave', function() {
                    element.css('background-color', '');
                });
            }
        };
    });
</script>