LearnKode

8 Example(s) of Ng-Mouseenter


Description :

Value of count variable increase by 1 each time when mouse enter on button.


Ng-Mouseenter 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>
        <input type="button" value="Mouse Enter" ng-mouseenter="count=count+1" />
        {{count}}
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-mouseenter directive call the mouseDown($event) function which calculates X and Y cordinate that is assign to the ng-style of div element which will show the the circle on mouse enter in the div element.


Ng-Mouseenter 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>
<style>
    .circle{
        border-radius:50px;
    }
</style>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <p>Mouse Enter on the square</p>
        <div style="width:200px;height:200px; background-color:tomato;" ng-mouseenter="mouseDown($event)"></div>
        <div class="circle" ng-style="{ 'backgroundColor':'green', 'margin-top':X+'px', 'margin-left':Y+'px',width:'50px',height:'50px' }" >
    </div>
    <pre ng-show="X">Mouse enter at:{{X}},{{Y}}</pre>
</div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.mouseDown = function (event) {
            $scope.X = event.clientX-100;
            $scope.Y = event.clientY-100;
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-mouseenter directive call the mouseDown($event) function which calculates X and Y cordinate that is assign to the ng-style of div element.The position of div element change according to coordinates when we enter the mouse on the div element.


Ng-Mouseenter 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">
        <p>Mouse Enter on the square</p>
        <div ng-style="{'backgroundColor':'tomato', 'margin-top':X+'px', 'margin-left':Y+'px',width:'200px',height:'200px' }"  ng-mouseenter="mouseDown($event)"></div>
        <pre ng-show="X">Mouse enter at:{{X}},{{Y}}</pre>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.mouseDown = function (event) {
            $scope.X = event.clientX - 100;
            $scope.Y = event.clientY - 100;
        }
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Count of innerDiv or outerDiv increase by 1 each time in which mouse is enter.


Ng-Mouseenter 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 type="text/css">
        .outerDiv {
            width: 200px;
            height: 200px;
            background-color: maroon;
            border-radius: 100px;
        }

        .innerDiv {
            width: 100px;
            height: 100px;
            background-color: tomato;
            margin: -20px 0px 0px 50px;
            border-radius: 100px;
        }
    </style>
</head>
<body ng-app>
    <div>
        <p>Mouse Enter on the square</p>
        <div class="outerDiv" ng-mouseenter="outerCount=outerCount+1;outer=true" ng-mouseleave="outer=false">
            <p style="text-align:center;color:white">Mouse {{outer==true?'Enter':'Out'}}</p>
            <br />
            <div class="innerDiv" ng-mouseenter="innerCount=innerCount+1;inner=true" ng-mouseleave="inner=false">
                <p style="text-align:center;color:white">Mouse {{inner==true?'Enter':'Out'}}</p>
                <p style="text-align:center;color:white">{{innerCount}}</p>
            </div>
            <p style="text-align:center;color:white">{{outerCount}}<br /></p>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Bydefault value of textbox is LearnIt which is bind to mouseEnter variable with ng-model directive.On mouse enter event text of textbox changes to visrosoftware because at that time mouseEnter variable value is visrosoftware and on mouse leave it becomes LearnIt.


Ng-Mouseenter 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>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        Mouse Enter: <input type="text" ng-mouseenter="mouseEnter='Visrosoftware'" ng-mouseleave="mouseEnter='LearnIt'" ng-model="mouseEnter" />
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.mouseEnter = 'LearnIt';
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

When mouse is enter on the div element the child div element is shown in main div and first class apply on it because Show variable value is true on ng-mouseenter directive which will assign to ng-show directive of child div element.


Ng-Mouseenter 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>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }

    .first > div {
        width: 25px;
        height: 25px;
        background-color: red;
    }
</style>
</head>
<body ng-app>
    <div>
        <div ng-mouseenter="Show=true" ng-mouseleave="Show=false" class="first"><div ng-show="Show || Show"></div></div>
        <div ng-mouseenter="isShow=true" ng-mouseleave="isShow=false" class="first"><div ng-show="isShow || isShow"></div></div>
    </div>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Mouseenter-7


Ng-Mouseenter 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="app">
    <div class="container">
        <div class="row" ng-controller="myController">
            <div class="col-md-2"></div>
            <div class="col-md-8 well">
                <h3>Image Selected On Mouse Enter</h3>
                <div class="row">
                    <div class="col-md-4" style="margin-bottom:20px;" ng-repeat="img in images" ng-mouseenter="style={ 'border': '6px solid black' }" ng-mouseleave="style={}">
                        <img ng-style="style" style="height:150px;width:200px;" ng-src="{{img.path}}" />
                    </div>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
    <script>
    var app = angular.module("app", []);
    app.controller('myController', ['$scope', function ($scope) {
        $scope.images = [{ path: 'http://learnit.visrosoftware.com/datafiles/enter1.jpg' },
            { path: 'http://learnit.visrosoftware.com/datafiles/enter2.jpg' },
            { path: 'http://learnit.visrosoftware.com/datafiles/enter3.jpg' },
            { path: 'http://learnit.visrosoftware.com/datafiles/enter4.jpg' },
            { path: 'http://learnit.visrosoftware.com/datafiles/enter5.jpg' },
            { path: 'http://learnit.visrosoftware.com/datafiles/enter6.jpg' }];
    }]);
</script>
</body>
</html>
Try it » Download Example »

Output

Description :

Ng-Mouseenter-8


Ng-Mouseenter 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">
<style>
    .level1 {
        height: 200px;
        width: 250px;
    }

    .level2 {
        height: 300px;
        width: 350px;
    }

    .level3 {
        height: 400px;
        width: 450px;
    }

    .level4 {
        height: 500px;
        width: 550px;
    }

    .border {
        border: 1px solid gray;
    }
</style>
</head>
<body ng-app="">
    <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8 well">
                <div class="level4 border" ng-style="style" ng-mouseenter="style={'border':'none'}">
                    <div class="level3 border" ng-style="style1" ng-mouseenter="style1={'border':'none'}">
                        <div class="level2 border" ng-style="style2" ng-mouseenter="style2={'border':'none'}">
                            <div class="level1 border" ng-style="style3" ng-mouseenter="style3={'background-color':'green'}"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
</body>
</html>
Try it » Download Example »

Output