AngularJS Live Example

HTML

<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
<script>
angular.directive('my:mouseover', function(expression, compiledElement) {
    var compiler = this;
    return function(linkElement){
        var self = this;
        linkElement.mouseenter(function(event){
          self.$tryEval(expression);
          self.$eval();
          event.stopPropagation();
        });
      };
});
angular.directive('my:mouseout', function(expression, compiledElement) {
    return function(linkElement){
        var self = this;
        linkElement.mouseleave(function(event){
          self.$tryEval(expression);
          self.$eval();
          event.stopPropagation();
        });
      };
});



















</script>

<div ng:init="friends = [{name:'John', age:25}, {name:'Mary', age:28}]; showDiv=false;">
  I have {{friends.length}} friends. They are:
  <ul>
    <li ng:repeat="friend in friends">
        <div my:mouseover="showDiv=true" my:mouseout="showDiv=false">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
        </div>
        <div ng:show="showDiv">
            test
        </div>
    </li>
  </ul>
</div>

CSS

body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }