Сохранить выделение(:hover) на последнем выделенном элементе

#javascript #css #angularjs

CSS

.can_click {
  cursor: pointer;
}

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


HTML


    

        
{{x.name}}
    



Как сделать так, чтобы после отвода курсора за пределы таблицы последний элемент,
к которому было применено событие :hover, остался выделенным?

Есть какие нибудь простые пути?
    

Ответы

Ответ 1

Вариант без дополнительных директив, с сохранением индекса текущего элемента.



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


  

    

      

        
{{x.name}}
      
    
  



Ответ 2

Решение на angular.js с использованием встроенного 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;
}


  

    

      

        
{{x.name}}
      
    
  





Пример на JSFiddle


Ответ 3

Можно через 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;
}


  

    
11111111
    
222222
    
3333333
    
44444444
  
  

    
11111111
    
222222
    
3333333
    
44444444