AngularJS | ng-mouseover 指令

AngularJS 中的ng-mouseover 指令用于在特定 HTML 元素上发生 mouseover 事件时应用自定义行为。它可用于在鼠标移到特定元素上时显示弹出警报。所有 HTML 元素都支持它。

句法：

 Contents... 

示例 1：此示例使用 ng-mouseover 指令在鼠标移动到元素上时显示内容。

      

    ng-mouseover Directive
  
    
    
  
    
        .geek {
            border: 1px solid black;
            width: 400px;
            background-color: green;
            border-radius: 4px;
            height: 20px;
            color: white;
        }
    

  

    
        
            GeeksforGeeks
        
          
        ng-mouseover Directive
          
        
          
            
                Mouse over me!
            
              
            
              
            
                GeeksforGeeks is the computer 
                science portal for geeks.
            
        
    

  

输出：
在鼠标悬停元素之前：

鼠标悬停元素后：

示例 2：此示例使用 ng-mouseover 指令在鼠标移过元素时显示警告消息。

      

    ng-mouseover Directive
  
    
    

  

      
    GeeksforGeeks
    ng-mouseover Directive
   
    
        Input: 
    
      
    
        var app = angular.module("app", []);
        app.controller('app', ['$scope', function ($scope) {
            $scope.click = 'geeksforgeeks';
            $scope.alert = function () {
                alert($scope.click);
            }
        }]);
    

  

输出：
在鼠标悬停元素之前：

鼠标悬停元素后：