How to highlight the table row on mouse hover

Answer 1

HTML:

<table class="table-hover">

CSS:

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

And if else you want is to make the tr selectable:

HTML:

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

CSS:

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

View JSFiddle Sample

Answer 2

I'm not familiar with Angular, so this may be the incorrect way to do this, but this seems to work on your fiddle ...

change the row to

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

and add the css class

.highlight {
    background-color: gray;
}

The idea comes from this SO question

Answer 3

you can apply class on mouse over like this.

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

in the controller add function.

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