6

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>

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

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

3 ответа 3

5

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

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>

4

Решение на 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;
}
<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

13
  • а зачем добавлять класс inactive? если только ради прозрачного фона, то он вернется к начальному значению когда уберется класс active
    – Grundy
    8 авг 2016 в 14:50
  • @Grundy чтобы снять выделение со всех элементов и применить к текущему
    – Romanzhivo
    8 авг 2016 в 14:53
  • ага, это вместо removeClass('active') получается :)
    – Grundy
    8 авг 2016 в 14:54
  • @Grundy, вы правы, глупое решение)
    – Romanzhivo
    8 авг 2016 в 14:56
  • кстати сейчас забавно получается, в итоге все элементы имеют класс active и inactive одновременно, и активность определяется отсутствием класса inactive, а не присутствием active
    – Grundy
    8 авг 2016 в 14:57
1

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

4
  • 1
    angularjs
    – Qwertiy
    8 авг 2016 в 13:23
  • @Qwertiy ТС просил простые пути.....
    – C.Raf.T
    8 авг 2016 в 13:37
  • @C.Raf.T, использование библиотеки, которая даже может быть не подключена в проект, не совсем простой путь
    – Grundy
    8 авг 2016 в 13:48
  • Да в принципе jquery не сложно подключить и в целом решение достаточно короткое, но есть лучше, как оказалось :)
    – rjhdby
    8 авг 2016 в 15:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.