Ng-Mouseover-4

 
There are elements of array.The element on which we over the mouse the style which is bind to ng-mouseover directive will apply.
 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <style> .nav { padding: 10px; cursor: pointer; background-color: gray; border-bottom: 5px solid tomato; } </style> </head> <body ng-app="app"> <div ng-controller="controllerName"> <span class="nav" ng-repeat="p in nav" ng-style="style" ng-mouseover="style={'border-bottom': '5px solid red','background-color':'pink','cursor':'pointer'}" ng-mouseleave="style={}">{{p}}</span> </div> <script> var app = angular.module("app", []); app.controller('controllerName', ['$scope', function ($scope) { $scope.nav=["Home","About","Contact"] }]); </script> </body> </html>
Output