CSS

.can_click { cursor: pointer; } .can_click:hover { background-color : #1de9b6; }

HTML

 <table> <tr ng-repeat="x in list" class="can_click"> <td>{{x.name}}</td> </tr> </table>

How to make so that after moving the cursor out of the table, the last element to which the event was applied :hover , remains selected?

Are there any easy ways?

    3 answers 3

    Option without additional directives, while maintaining the index of the current element.

     var myApp = angular.module('myApp', []); myApp.controller('myController', function($scope) { $scope.list = [{ name: "Николай" }, { name: "Василий" }, { name: "Π‘Π΅Ρ€Π³Π΅ΠΉ" }]; $scope.activeIndex = -1; $scope.mouseenter = function(index) { $scope.activeIndex = index; } }); 
     table { border-collapse: collapse; } .can_click { border: 1px solid #a9a9a9; cursor: pointer; } .active { background-color: #1de9b6; } 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <div ng-app="myApp"> <table ng-controller="myController"> <tbody> <tr ng-repeat="x in list" data-ng-class="{'active':$index==activeIndex}" class="can_click" data-ng-mouseenter="mouseenter($index)"> <td>{{x.name}}</td> </tr> </tbody> </table> </div>

      Solution on angular.js using embedded jqLite

       var myApp = angular.module('myApp', []); myApp.controller('myController', function($scope) { $scope.list = [ { name: "Николай" }, { name: "Василий" }, { name: "Π‘Π΅Ρ€Π³Π΅ΠΉ" } ] }); myApp.directive('lastHover', function() { return { link: function(scope, element, attrs) { element.on('mouseenter', function(event) { element.parent().children('can_click').removeClass('active'); element.addClass('active'); }); } } }); 
       table { border-collapse: collapse; } .can_click td { border: 1px solid #a9a9a9; padding: 2px 6px; cursor : pointer; } .active { background-color : #1de9b6; } 
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <table ng-controller="myController"> <tbody> <tr ng-repeat="x in list" class="can_click" data-last-hover> <td>{{x.name}}</td> </tr> </tbody> </table> </div>

      JSFiddle example

      • why add an inactive class? if only for the sake of a transparent background, it will return to the initial value when the class active is removed - Grundy
      • @Grundy to deselect all elements and apply to current - Romanzhivo 2:53 pm
      • aha, instead of removeClass ('active') it turns out :) - Grundy
      • @Grundy, you're right, stupid decision) - Romanzhivo
      • By the way, now it’s funny, as a result, all elements have a class active and inactive at the same time, and activity is determined by the absence of the class inactive, and not by the presence of active - Grundy

      It is possible through jquery:

       $(".can_click td").mouseenter(function() { $(".can_click td").css("background-color", "#fff"); $(this).css("background-color", "yellow"); }) 
       td { border: 2px solid red; background-color: #fff; } .can_click { cursor: pointer; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="can_click"> <td>11111111</td> <td>222222</td> <td>3333333</td> <td>44444444</td> </tr> <tr class="can_click"> <td>11111111</td> <td>222222</td> <td>3333333</td> <td>44444444</td> </tr> </table>

      • one
        angularjs - Qwertiy ♦
      • @Qwertiy TS requested easy ways ..... - C.Raf.T
      • @ C.Raf.T, using the library, which may not even be included in the project, is not an easy way - Grundy
      • Yes, in principle, jquery is not difficult to connect and in general the solution is rather short, but there is better, as it turned out :) - rjhdby