Using ngClass for hovering effect in Angular

Question

Using ngClass for hovering effect in Angular

If I have the following code snippet:

 <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 am trying to change the color to red when a user hovers over the div. However, currently both divs turn red when hovered over.
[Fiddle]1 for experimenting with the code

html css angularjs

Answer 1

Answer №1

Utilize the directive provided below:

.directive('hoverEffect', 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);
            });
        }
    };
});

Include this snippet of HTML:

<div class="bold" hover-effect="blue" >
     Example Text.
</div>

For more information, visit this link

Answer 2

Utilize the directive provided below:

.directive('hoverEffect', 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);
            });
        }
    };
});

Include this snippet of HTML:

<div class="bold" hover-effect="blue" >
     Example Text.
</div>

For more information, visit this link

Answer 3

Answer №2

<div class="italic" ng-repeat="element in elements" ng-mouseover="highlightSelection($index)" 
ng-mouseleave="removeHighlight($index)" ng-class="{blue: $index == {{selection}}}">


Controller:
$scope.highlightSelection = function(idx) {
     $scope.selection = idx;
     }

$scope.removeHighlight = function(idx) {
     $scope.selection = '';
     }

Answer 4

<div class="italic" ng-repeat="element in elements" ng-mouseover="highlightSelection($index)" 
ng-mouseleave="removeHighlight($index)" ng-class="{blue: $index == {{selection}}}">


Controller:
$scope.highlightSelection = function(idx) {
     $scope.selection = idx;
     }

$scope.removeHighlight = function(idx) {
     $scope.selection = '';
     }

Answer 5

Answer №3

No special directive or function is required for this task. All you need to do is create a distinct variable for each individual div. This could be named as hover1 and hover2, hovers.div1 and hovers.div2, or even hover[0] and hover[1]. If both divs are linked to the same variable, any action taken will affect both divs simultaneously.

Check out this example: http://jsfiddle.net/pthfV/841/

Answer 6

No special directive or function is required for this task. All you need to do is create a distinct variable for each individual div. This could be named as hover1 and hover2, hovers.div1 and hovers.div2, or even hover[0] and hover[1]. If both divs are linked to the same variable, any action taken will affect both divs simultaneously.

Check out this example: http://jsfiddle.net/pthfV/841/

Using ngClass for hovering effect in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Transferring scope between pages without the need for an angular service definition

The unresolvable IE7 Z-Index dilemma caused by a bug within nested elements!

refresh the route without having to reload the controller

Database stores line breaks in a structured format

PDF links not loading properly in Chrome's PDF Viewer, causing them to become stuck

The art of CSS Absolute Positioning and the Science of Body Sc

What steps can I take to guarantee that my grid always accommodates its child without being too small?

What are the best ways to utilize dynamic CSS on a smartphone browser for optimal performance?

Implementing Dynamic Parent Node Manipulation with Button Clicks in JavaScript

Differences between THIS and angular's $SCOPE.$ONIn JavaScript,

Retrieving a directive's value within a controller

Ideas for concealing a header on a particular page in WordPress

The controller is being utilized by two different directives

What is the best way to create a search bar that overlaps with a filter button?

Tips for creating an onChange function in an input field using jQuery

Advantages of using individual CSS files for components in React.js

Completing a form and reloading the page without including the reload in the browsing history

Create a DIV element that completely fills the vertical space available

Is There a Name Clash Issue with Dependency Injection in AngularJS?

A guide on incorporating CSS animations triggered by reaching specific media-query breakpoints