javascript - Disable and Enable Hover in AngularJS - Stack Overflow

admin管理员组

文章数量:1317909

I want to enable and disable hover state on element on some condition. Very new to angular so don't know how to approach towards it. Also didn't find a solution on web.

Dummy CSS Code:

xyz{
   background:#2f9bdb;
}

xyz:hover{
   background:#d7d7d7;
}

HTML:

<button ng-click="toggleEnable()"></button>
<div class="xyz" on-hover-select></div>

ng-app and ng-module done. My JS:

 angular.module('myModule',[])
    .controller('myCtrl',function($scope){
       $scope.enableHover=true;
       $scope.toggleEnable=function(){
          return $scope.enableHover=!$scope.enableHover;
       }

    }).directive('onHoverSelect',function(){
         return{
              restrict:'A',
              link:function(scope,ele,attrs){
                 if(scope.enableHover){
                       //enable hover
                  }else{
                     //disable hover
                  }
             }
         }

    });

I have tried using bind unbind on off on angular element but its not working. Also will directive update itself on enableHover value change? Might be basic one but very new to the framework. Please help

I want to enable and disable hover state on element on some condition. Very new to angular so don't know how to approach towards it. Also didn't find a solution on web.

Dummy CSS Code:

xyz{
   background:#2f9bdb;
}

xyz:hover{
   background:#d7d7d7;
}

HTML:

<button ng-click="toggleEnable()"></button>
<div class="xyz" on-hover-select></div>

ng-app and ng-module done. My JS:

 angular.module('myModule',[])
    .controller('myCtrl',function($scope){
       $scope.enableHover=true;
       $scope.toggleEnable=function(){
          return $scope.enableHover=!$scope.enableHover;
       }

    }).directive('onHoverSelect',function(){
         return{
              restrict:'A',
              link:function(scope,ele,attrs){
                 if(scope.enableHover){
                       //enable hover
                  }else{
                     //disable hover
                  }
             }
         }

    });

I have tried using bind unbind on off on angular element but its not working. Also will directive update itself on enableHover value change? Might be basic one but very new to the framework. Please help

• javascript
• jquery
• css
• angularjs

Share Improve this question Follow edited May 21, 2015 at 11:13 Ankur Aggarwal asked May 21, 2015 at 11:12 Ankur AggarwalAnkur Aggarwal 3,10155 gold badges3333 silver badges5757 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

ele.css("pointer-event", "none"); will prevent all events, fired with the cursor. even click events wont fire. but if you dont need any events but hover, this will be your fastest solution ele.css("pointer-event", ""); will reset it

I like the answer from @Mephiztopheles, but it does have it's limitations and risks. First, if you need support for IE<11, pointer-events is out. Second, as pointed out, this will remove all mouse events including click.

I suggest instead that you change your CSS and add a separate class with the hover, then you can just toggle that class. You can even use the built in ngClass directive to do it.

angular.module('demo', []).controller('MainCtrl', ['$scope', function($scope){
  $scope.hoverme = true;
}]);

.box {
  height: 100px;
  width: 100px;
  background-color: teal;
  -webkit-transition: all .5s linear;
}

.hover:hover {
  background-color: orange;
}

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<div ng-app="demo" ng-controller="MainCtrl">
  <div class="box" ng-class="{hover: hoverme}"></div>
  <button ng-click="hoverme = !hoverme">Toggle Hover</button>
</div>

You can try to enforce your template part with css hover to redraw.

I did it for my menu which open on css hover and should close on link click. Tried css classes removal but worked buggy (sometime hover closed sometime not randomly).

I ended up with clearing menu items and then setting them right back, which will rerender menu and cancel hover. Its a bit overkill, but there is no direct way to fight css hover with js.

let archivedMenuData = $rootScope.topMenuData;
$rootScope.topMenuData = [];
setTimeout(function () {
        $rootScope.$apply();
        $rootScope.topMenuData = archivedMenuData;
    },
    50);

本文标签： javascriptDisable and Enable Hover in AngularJSStack Overflow