javascript - How to remove hover effect in Angular -

i trying build angular app , have 1 problem.

i have this

<div ng-class="{selectthis : item.pick}" ng-click="pickitem(item)" class="item">item name here<div> 

js controller:

$scope.pickitem = function(item) {     item.pick = true; } 

css:

.item {     color: red;     …more css }  .item:hover {     color:blue;     ...more css }  .selectthis {     color:blue; } 

it works on desktop hover effect remain on touch device when user touches div. know can add media query solve think that's outdated approach. there anyways can solve angular way? lot!

you solve angular adding class when touch events fired:

app.directive('touchclass', function() {   return {     restrict: 'a',     scope: {       touchclass: '@'     },     link: function(scope, element) {          element.on('touchstart', function() {         element.$addclass(scope.touchclass);       });        element.on('touchend', function() {         element.$removeclass(scope.touchclass);       });     }   }; }); 

then can add directive element want. add touch class whilst there touch in progress , remove when touch over.

<div ng-class="{selectthis : item.pick}"      ng-click="pickitem(item)"      touch-class="touch"      class="item">   item name here <div> 

you can treat class hover pseudo selector:

.item {   color: red;   …more css }  .item.touch {   color:blue;   ...more css }  .selectthis {   color:blue; }