CODEWITHSUNDEEP
htmlcssangularjs
user3856699
user3856699

Reputation:

ngClass with hover Angular

Let's say i have this : 

 <div 
     class="italic" 
     ng-class="{red: hover}" 
     ng-mouseenter="hover = true"
     ng-mouseleave="hover = false">
         Test 1 2 3.
    </div>
     <div 
     class="italic" 
     ng-class="{red: hover}" 
     ng-mouseenter="hover = true"
     ng-mouseleave="hover = false">
         Test 1 2 3.
    </div>

i want to change color with red class when user hover the div . but now when hovering both div get red .
[Fiddle]1 for playing with Code

Upvotes: 2

Views: 2670

Answers (3)

Bernardo Dal Corno
Bernardo Dal Corno

Reputation: 2088

You don't need a directive or function for this. You just need a separate variable for each div. This may be hover1 vs hover2, hovers.div1 vs hovers.div2, or even hover[0] vs hover[1]. If both divs act based on the same variable, the action will always occur to both divs.

http://jsfiddle.net/pthfV/841/

Upvotes: 0

byrdr
byrdr

Reputation: 5487

<div class="italic" ng-repeat="item in items" ng-mouseover="hoverSelect($index)" 
ng-mouseleave="hoverDeselect($index)" ng-class="{red: $index == {{active}}}">


Controller:
$scope.hoverSelect = function(index) {
     $scope.active = index;
     }

$scope.hoverDeselect = function(index) {
     $scope.active = '';
     }

Upvotes: 0

ArtemKh
ArtemKh

Reputation: 1000

You need to use directive

.directive('hoverClass', function () {
    return {
        restrict: 'A',
        scope: {
            hoverClass: '@'
        },
        link: function (scope, element) {
            element.on('mouseenter', function() {
                element.addClass(scope.hoverClass);
            });
            element.on('mouseleave', function() {
                element.removeClass(scope.hoverClass);
            });
        }
    };
});

And add this html

<div class="italic" hover-class="red" >
     Test 1 2 3.
</div>

Try this http://jsfiddle.net/pthfV/238/

Upvotes: 1

Related Questions