Removing the hover effect in Angular can be achieved by targeting the specific element

Question

Removing the hover effect in Angular can be achieved by targeting the specific element

Currently, I am in the process of constructing an angular application and have encountered an issue that I need assistance with.

Here is a snippet of my code:

<div ng-class="{selectThis : item.pick}" ng-click="pickItem(item)" class="item">Item name here<div>

My JavaScript controller looks like this:

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

Within my CSS file:

.item {
    color: red;
    …more css
}

.item:hover {
    color:blue;
    ...more css
}

.selectThis {
    color:blue;
}

While everything appears to be functioning correctly on desktops, the hover effect persists on touch devices when a user touches the div. I am aware that adding a media query could resolve this issue, but I believe there may be a more modern Angular-based solution available. Any suggestions would be greatly appreciated. Thank you!

javascript html css angularjs

Answer 1

Answer №1

To tackle this issue using Angular, consider incorporating a class upon detection of touch events:

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);
      });
    }
  };
});

You can then apply this directive to any desired element. It will append the touch class while a touch event is active and remove it once the touch ends.

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

This class can be used similarly to the hover pseudo selector in CSS:

.item {
  color: red;
  …more css
}

.item.touch {
  color: blue;
  ...more css
}

.selectThis {
  color: blue;
}

Answer 2

To tackle this issue using Angular, consider incorporating a class upon detection of touch events:

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);
      });
    }
  };
});

You can then apply this directive to any desired element. It will append the touch class while a touch event is active and remove it once the touch ends.

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

This class can be used similarly to the hover pseudo selector in CSS:

.item {
  color: red;
  …more css
}

.item.touch {
  color: blue;
  ...more css
}

.selectThis {
  color: blue;
}

Answer 3

Answer №2

You can also incorporate touch events into your code:

<div ng-class=="{ 'touch': touchStart}"
  on-touch
 class="item">Enter item name here<div>

Create a custom directive to manage touch events:

    .directive('onTouch',function() {
        return {
            restrict: 'A',
            link: function ($scope, $elem, $attrs) {
                $elem.on('touchstart',function(e) {
                    $scope.touchStart= true;
                    $scope.$apply();
                });
                $elem.on('touchend',function(e) {
                    $scope.touchStart= false;
                    $scope.$apply();
                });
            }
        }
    });

Note: This code is a rough draft and has not been tested yet. Hopefully it will be useful for you.

Answer 4

You can also incorporate touch events into your code:

<div ng-class=="{ 'touch': touchStart}"
  on-touch
 class="item">Enter item name here<div>

Create a custom directive to manage touch events:

    .directive('onTouch',function() {
        return {
            restrict: 'A',
            link: function ($scope, $elem, $attrs) {
                $elem.on('touchstart',function(e) {
                    $scope.touchStart= true;
                    $scope.$apply();
                });
                $elem.on('touchend',function(e) {
                    $scope.touchStart= false;
                    $scope.$apply();
                });
            }
        }
    });

Note: This code is a rough draft and has not been tested yet. Hopefully it will be useful for you.

Removing the hover effect in Angular can be achieved by targeting the specific element

Answer №1

Answer №2

Similar questions

Converting CSV data into JSON format using NodeJs and integrating it with MongoDB

Tips for utilizing Jquery webcam on mobile devices like Android and iPhone

Ways to retrieve the ID attribute value of the third ancestor above

Adding a div element to a React component with the help of React hooks

Bizarre idiosyncrasy in Internet Explorer 7/8 regarding Javascript

Submitting a PDF document to the server with PHP Laravel through AJAX

AngularJS is encountering an issue with the callback function, resulting in an error

How can I effectively transfer parameters to the onSuccess callback function?

Display a pop-up video player when a button is clicked to watch multiple videos on a webpage utilizing jQuery/Javascript

Tips for modifying HTML attributes in AngularJS

Currently, my goal is to create a functional copy button through the use of JavaScript

The ajax function nestled within a nested forEach loop completes its execution once the inner callback function is triggered

Troubleshooting a jQuery Popup/Modal Glitch

Troubleshooting route problems between AngularJS and Wordpress

Achieving the validation with a bold red border

Cons of storing data in local storage

Combining the power of Angular CLI with Squarespace

New Ways to Style the Final Element in a PHP Array - Part 2

Functional programming and async in action within a while loop implemented in JavaScript

Real-time data update with Socket io: instantly refresh data on another page upon form submission without having to manually