Angular: Empty Fiddle

http://angularjs.org/

by Freewind

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc8.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<html ng-app="myapp">
  <body ng-controller="Controller">
      <div hoveron="on" class="d" style="width:200px;height:200px">
          <div hoveron="on" class="d" style="width:150px;height:150px">
              <div hoveron="on" class="d" style="width:100px;height:100px">
              </div>
          </div>
      </div>
  </body>

</html>

CSS

.d { border: 1px solid red; background-color: white; }
.on { background-color: #e0e0e0 }

JavaScript

var myapp = angular.module('myapp',[]);

myapp.directive("hoveron", function() {
    return function(scope, elm, attrs) {
        elm.bind('mouseenter', function(event) {
            event.stopPropagation();
            elm.addClass(attrs.hoveron);
        });
        elm.bind('mouseleave', function(event) {
            event.stopPropagation();
            elm.removeClass(attrs.hoveron);
        });
    }
});
function Controller($scope) {
}