How To Highlight The Table Row On Mouse Hover

Question

I have this table:

Solution 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

Solution 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

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

javascript edu

How To Highlight The Table Row On Mouse Hover

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "How To Highlight The Table Row On Mouse Hover"