AngularJS child element hover effect on border

Question

AngularJS child element hover effect on border

My directives have a hierarchical relationship and can be nested quite deeply. I want to add a border when hovering over one of the directives.

When using :hover {}, the border appears on both the child and parent elements. Is there a more appropriate or efficient method to achieve this in Angular?

Appreciate any guidance or suggestions!

angularjs css

Answer 1

Answer №1

In order to select and style a specific element within a nested directive, it is necessary to have a method of isolating that particular element. Merely using the :hover pseudo-class will not suffice, so binding certain events can help resolve this issue. Below is an example directive that achieves this:

app.directive('directiveExample', function () {
    return {
        restrict: 'E',
        transclude: true,
        // Wrapping content
        template: '<div class="container-directive" ng-transclude></div>',
        link: function (scope, element, attr) {

          element.bind('mouseover', function(ev) {

            ev.stopPropagation();

            var wrappers = angular.element(document.getElementsByClassName('container-directive'));
            angular.forEach(wrappers, function(value, key) {
              angular.element(value).children('span').removeClass('active-element'); 
            });

            element.children('.container-directive').children('span').addClass('active-element');

          });

        }
    }
});

You can view the complete plunker HERE.

Answer 2

In order to select and style a specific element within a nested directive, it is necessary to have a method of isolating that particular element. Merely using the :hover pseudo-class will not suffice, so binding certain events can help resolve this issue. Below is an example directive that achieves this:

app.directive('directiveExample', function () {
    return {
        restrict: 'E',
        transclude: true,
        // Wrapping content
        template: '<div class="container-directive" ng-transclude></div>',
        link: function (scope, element, attr) {

          element.bind('mouseover', function(ev) {

            ev.stopPropagation();

            var wrappers = angular.element(document.getElementsByClassName('container-directive'));
            angular.forEach(wrappers, function(value, key) {
              angular.element(value).children('span').removeClass('active-element'); 
            });

            element.children('.container-directive').children('span').addClass('active-element');

          });

        }
    }
});

You can view the complete plunker HERE.

AngularJS child element hover effect on border

Answer №1

Similar questions

Difficulties arise when HTML divs do not properly encapsulate their intended content

Unable to retrieve information from the API despite successfully establishing a connection

Altering CSS attribute values using a random number generator

Stop iPhone body scrolling when fullscreen overlay is opened

The Performance of My Device is Lagging When Executing CSS Transition Effects

The persistent bar that refuses to abide by z-index rules in the Google Chrome browser

Adjust the background color of the body content to reflect changing content

What is the process of adding an array into a JSON object using the set() function in Firebase?

The process of toggling a div to slide up and down explained

Using Spring Boot to Enable Access-Control-Allow-Origin

ways to utilize inline styling in react using javascript

What could be causing AngularJS to truncate my URL in the search bar?

Is there a way to get Cesium points to orbit along with the map?

Angular: Tailored content and design for individual customers

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

What is the best way to perfectly center the navbar-nav class element in a menu using Bootstrap 5?

Creating a full-height application with CSS3 Flexbox and managing overflow

Creating an HTML table by populating it with data from a JavaScript array

What is the best way to extract value from an input text that is being repeated using ng-repeat within a Tr

What are the steps to achieve the desired PrimeFaces theme appearance for selectOneMenu?