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

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

{{x.name}}

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

Ответ

Вариант без дополнительных директив, с сохранением индекса текущего элемента.
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}}