如何在鼠标悬停时突出显示表格行

Question

我有这张桌子：

<div class="container" ng-app="sortApp" ng-controller="mainController">

  <table class="table table-bordered ">  
    <thead>
      <tr>
        <td>
          <a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
            Sushi Roll 
          </a>
        </td>
        <td>
          <a href="#" ng-click="sortType = 'fish'; sortReverse = !sortReverse">
          Fish Type 
          </a>
        </td>
      </tr>
    </thead>

    <tbody>
      <tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish">
        <td>{{ roll.name }}</td>
        <td>{{ roll.fish }}</td>
      </tr>
    </tbody>

  </table>

</div>

这是控制器：

angular.module('sortApp', [])

.controller('mainController', function($scope) {
  $scope.sortType     = 'name'; // set the default sort type
  $scope.sortReverse  = false;  // set the default sort order
  $scope.searchFish   = '';     // set the default search/filter term

  // create the list of sushi rolls 
  $scope.sushi = [
    { name: 'Cali Roll', fish: 'Crab' },
    { name: 'Philly', fish: 'Tuna' },
    { name: 'Tiger', fish: 'Eel' },
    { name: 'Rainbow', fish: 'Variety' }
  ];

});

这是提琴手 。

我想使用ng-mouseover指令突出显示鼠标悬停时表格行的边框。

我该如何实现它？

Answer 1

HTML：

<table class="table-hover">

CSS：

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

如果你想要的话就是让tr可选：

HTML：

<tr ng-click="doSomething()">

CSS：

tr[ng-click] {
    cursor: pointer;
}

查看JSFiddle示例

Answer 2

我不熟悉Angular，所以这可能是不正确的方法，但这似乎适用于你的小提琴......

将行更改为

<tr ng-class="rollClass" ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish" ng-mouseenter="rollClass = 'highlight'" ng-mouseleave="rollClass = ''">

并添加css类

.highlight {
    background-color: gray;
}

这个想法来自这个SO问题

Answer 3

你可以像这样在鼠标上应用课程。

http://jsfiddle.net/uuws8hbv/

<tr ng-repeat="roll in sushi | orderBy:sortType:sortReverse | filter:searchFish track by $index" ng-mouseover="rowselected($index)" 
  ng-class="{selected : $index == rowNumber}"

在控制器中添加功能。

$scope.rowselected = function(row)
{
   $scope.rowNumber = row;
}