LearnKode

8 Example(s) of Ng-Mouseover


Description :

Ng-init intialize the value of count variable to 0.Count is increase by 1 each time when we over the mouse on the button.


Ng-Mouseover Example - 1 
<!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>
</head>
<body ng-app>
    <div>
        <button ng-mouseover="count = count + 1" ng-init="count=0">
            Increment (when mouse is over)
        </button>
        count: {{count}}
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

We display numbers from 1 to 50 using ng-repeat directive.When we over the mouse the style that is bind to ng-mouseover event will apply on number otherwise ng-mouseleave style will apply.


Ng-Mouseover Example - 2 
<!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>
</head>
<body ng-app="app">
    <div ng-controller="controllerName" ng-init="genetareNumbers()">
        <span ng-repeat="number in numbers"  ><i ng-mouseover="style={color:'blue','background-color':'gray','font-size':'20px', 'cursor':'pointer'}" ng-mouseleave="style={'background-color':'white'}" ng-style="style">{{number}},</i></span>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.numbers = [];
        $scope.genetareNumbers = function () {
            for (var i = 1; i < 51; i++) {
                $scope.numbers.push(i);
            }
        };
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

When we over the mouse on array elements then mouseOver(p) function is call and display particular element below on which we over the mouse.


Ng-Mouseover Example - 3 
<!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>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <div ng-repeat="p in Arrs">
            <div style="background-color:gray;height:30px;width:100px" ng-mouseover="mouseOver(p)">{{p}}</div><br />
        </div>
        <pre>Mouse Over <b>{{data}}</b></pre>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.mouseOver = function (data) {
           $scope.data = data;
        };
        $scope.Arrs = ["First", "Second", "Third", "Fourth"]
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

There are elements of array.The element on which we over the mouse the style which is bind to ng-mouseover directive will apply.


Ng-Mouseover Example - 4 
<!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>
Try it » Download Example »

Output

Description :

In this example of Ng-Mouseover, It will display the tooltip on mouseover. See the code


Ng-Mouseover Example - 5 
<!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 type="text/css">
    .tooltip {
        border: 1px solid black;
        width: 230px;
        margin-left: 58px;
        margin-top: -35px;
        background-color: darkcyan;
        border-radius: 4px;
        height: 20px;
        color: white;
    }
</style>
</head>
<body ng-app="">
    <div ng-init="tooltip=false">
        <br />
        <br />
        <button ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">
            Tooltip
        </button>
        <div class="tooltip" ng-show="tooltip">Hi..Welcome to Angular JS World.</div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Example of Ng-Mouseover, We will show message once user mouse over to the divs.. See the code


Ng-Mouseover Example - 6 
<!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>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
    <div class="container">
        <div class="row text-center">
            <p>Mouse Over To Show Message</p>
            <div class="col-md-3 well" ng-mouseover="first=true">
                <div ng-show="first">Welcome</div>
            </div>
            <div class="col-md-3 well" ng-mouseover="second=true">
                <div ng-show="second">to</div>
            </div>
            <div class="col-md-3 well" ng-mouseover="third=true">
                <div ng-show="third">Angular</div>
            </div>
            <div class="col-md-3 well" ng-mouseover="fourth=true">
                <div ng-show="fourth">JS Tutorial</div>
            </div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

In thi example of Ng-Mouseover, We will show the image on mouse over of div element and on mouse leave we want to resize the image. See the code:


Ng-Mouseover Example - 7 
<!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>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
    <div class="container">
        <div class="row text-center">
            <p>Mouse Over To Zoom Image</p>
            <div class="col-md-2"></div>
            <div class="col-md-8" ng-mouseover="style={'height':'450px','width':'800px'}" ng-mouseleave="style={'height':'300px','width':'500px'}">
                <img class="text-center" ng-style="style" style="height:300px;width:500px" ng-hide="changeImage" src="http://learnit.visrosoftware.com/datafiles/win8(1).jpg" />
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Another example of Ng-Mouseover, Images will be changed on mouse over. See the code below


Ng-Mouseover Example - 8 
<!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>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="">
    <div class="container">
        <div class="row text-center">
            <p>Mouse Over To View Back Side</p>
            <div class="col-md-3"></div>
            <div class="col-md-6" ng-mouseover="changeImage=true" ng-mouseleave="changeImage=false" ng-init="changeImage=false">
                <img class="text-center" style="height:300px;width:300px" ng-hide="changeImage" src="http://learnit.visrosoftware.com/datafiles/1.jpeg" />
                <img class="text-center" style="height:300px;width:300px" ng-show="changeImage" src="http://learnit.visrosoftware.com/datafiles/2.jpeg" />
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output