Skip to content

Courses
Tutorials
Practice
Contests

AngularJS Tutorial
AngularJS Directives
AngularJS Functions
AngularJS Filters
AngularJS Examples
AngularJS Interview Questions
Angular ngx Bootstrap
AngularJS Cheat Sheet
AngularJS PrimeNG
JavaScript
Web Technology

AngularJS ng-mouseleave Directive

AngularJS ng-mouseenter Directive

Last Updated : 01 Aug, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

The ng-mouseenter directive in AngularJS is used to apply custom behavior when a mouse-enter event occurs on a specific HTML element. It can be used to show a popup alert when the mouse enters a specific position in an HTML element. It is supported by all HTML elements.

Syntax:

<element ng-mouseenter="expression"> 
    Content ... 
</element>

Parameter value:

expression: The expression will execute only when the mouse cursor enters the specific region of an element.

Example 1: This example describes the use of the ng-mouseenter Directive in AngularJS by counting the number of times the mouse enters the specific area of an element.

HTML

<!DOCTYPE html> <html>  <head>     <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/     angular.min.js"></script>     <title>ng-mouseenter Directive</title>      <style type="text/css">         .outerDiv {             width: 100px;             height: 100px;             background-color: green;             margin-left: 40px;         }     </style> </head>  <body ng-app style="padding:30px">     <h1 style="color:green">GeeksforGeeks</h1>     <h2>ng-mouseenter Directive</h2>     <div class="outerDiv"          ng-mouseenter="oc=oc+1;outer=true"          ng-mouseleave="outer=false">         <p style="text-align:center;color:white">Mouse             {{outer==true?'Enter':'Out'}}         </p>          <br />         <p style="text-align:center;color:white">             {{oc}}<br />         </p>      </div> </body> </html>

Output:

Example 2: This example describes the use of the ng-mouseenter Directive in AngularJS by displaying the alert message by entering into the input element's region.

HTML

<!DOCTYPE html> <html>  <head>     <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">     </script>     <title>ng-mouseenter Directive</title> </head>  <body ng-app="app" style="text-align:center">     <h1 style="color:green">GeeksforGeeks</h1>     <h2>ng-mouseenter Directive</h2>      <div ng-controller="app">         Input: <input type="text"                        ng-mouseenter="alert()"                        ng-model="click" />     </div>     <script>         var app = angular.module("app", []);         app.controller('app', ['$scope', function ($scope) {             $scope.click = 'geeksforgeeks';             $scope.alert = function () {                 alert($scope.click);             }         }]);     </script> </body> </html>

Output:

AngularJS ng-mouseleave Directive

V

Vishal Chaudhary 2

Improve

Article Tags :

Web Technologies
AngularJS
AngularJS-Directives

Similar Reads

AngularJS ng-mouseover Directive

The ng-mouseover Directive in AngularJS is used to apply custom behavior when a mouseover event occurs on a specific HTML element. It can be used to show a popup alert when the mouse moves over a specific element. It is supported by all HTML elements. Syntax: <element ng-mouseover="expression"

AngularJS ng-mouseleave Directive

The ng-mouseleave directive in AngularJS is used to apply custom behavior when a mouse-leave event occurs on a specific HTML element. It can be used to show a popup alert when the mouse leaves a specific position in an HTML element. It is supported by all HTML elements. Syntax: <element ng-mousel

AngularJS ng-mousemove Directive

The ng-mousemove Directive in AngularJS is used to apply custom behavior when mousemove event occurs on a specific HTML element. It can be used to display a popup alert when the mouse moves over a specific HTML element. It is supported by all HTML elements. Syntax: <element ng-mousemove="expressi

AngularJS ng-mousedown Directive

The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is supported by all HTML elements. Syntax: <element ng-mousedown="expression"> Content

AngularJS ng-mouseup Directive

The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax:

AngularJS ng-focus Directive

The ng-focus Directive in AngluarJS is used to apply custom behavior when an element is focused. It can be used to show/hide some element or it can pop up an alert when an element is being focused. It is supported by <a>, <input>, <select> and <textarea> elements. Syntax:

AngularJS ng-model Directive

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.

AngularJS ng-form Directive

The ng-form Directive in AngularJS is used to create a nested form i.e. one form inside the other form. It specifies an inherit control from the HTML form. It creates a control group inside a form directive which can be used to determine the validity of a sub-group of controls. Syntax: <ng-form [

AngularJS ng-init Directive

The ng-init Directive is used to initialize AngularJS Application data. It defines the initial value for an AngularJS application and assigns values to the variables. The ng-init directive defines initial values and variables for an AngularJS application. Syntax: <element ng-init = "expression"

AngularJS ng-href Directive

The ng-href directive is used when we have an angular expression inside the href value. If href attribute is used then the problem is that if in case the link is clicked before AngularJS has replaced the expression with its value then it may go to the wrong URL and the link will be broken and will m

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences