When approaching table hover effects, there are two main methods to consider. One method involves utilizing CSS without JavaScript, while the other method incorporates ng-mouseover in AngularJS. Personally, I find the CSS approach to be more organized as it allows for complete styling control using CSS alone. Below, both approaches are outlined.
CSS-Only Solution
You can achieve hover effects on tables using pure CSS without the need for JavaScript at all. Simply assign a class, like class="tablecell", to your td elements and apply a similar class to your rows. Then, include the following CSS snippet in your main.css file:
.tablerow:hover, .tablecell:hover {
background-color: red;
}
This snippet enables hovering effects on both rows and cells within the table.
Implementing hover effects on columns is slightly more complex since each column does not have a dedicated element for monitoring hover states. To work around this, you can create a large highlighting element and clip its overflow above and below the table boundaries.
table {
overflow: hidden;
}
.tablecell {
position:relative;
}
.tablecell:hover::before {
content:"";
position: absolute;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
background-color: red;
}
Live Example:
Combining these CSS rules results in interactive table hover effects like the ones demonstrated below:
table {
overflow: hidden;
}
.tablecell {
position: relative;
}
.tablecell:hover::before {
content: "";
position: absolute;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
background-color: red;
}
.tablerow:hover {
background-color: red;
}
<div ng-app="theApp" ng-controller="MyCtrl">
<table>
<tr class="tablerow">
<td class="tablecell">aaa</td>
<td class="tablecell">aaa</td>
<td class="tablecell">aaa</td>
</tr>
<tr class="tablerow">
<td class="tablecell">bbb</td>
<td class="tablecell">bbb</td>
<td class="tablecell">bbb</td>
</tr>
<tr class="tablerow">
<td class="tablecell">ccc</td>
<td class="tablecell">ccc</td>
<td class="tablecell">ccc</td>
</tr>
</table>
</div>
For additional information on column highlighting techniques, refer to this resource.
JavaScript Approach
If you opt to utilize JavaScript instead of the CSS hack mentioned earlier, you can directly handle table hover effects. In this scenario, your mouseOverTd function must track the current row and column being hovered over, which will then be used by the ng-class attribute to apply styles dynamically.
Here's an example implementation:
angular.module("theApp", [])
.controller("MainCtrl", function ($scope) {
$scope.rows = [1, 2, 3, 4]
$scope.games = ['a', 'b', 'c', 'd'];
$scope.hoveredCol = null;
$scope.hoveredRow = null;
$scope.mouseOverTd = function (row, game) {
$scope.hoveredRow = row;
$scope.hoveredCol = game;
};
});
In your HTML structure (or Jade template), you would integrate the following code snippet:
td(ng-repeat="game in games", ng-mouseover="mouseOverTd(row, game)", ng-class="{highlighted: (hoveredCol == game || hoveredRow == row)}") {{game}}
Lastly, don't forget to reset the hoveredCol and hoveredRow variables when the mouse leaves the table area. You can accomplish this by adding the following line:
table(ng-mouseleave="hoveredCol = null; hoveredRow = null")
Live Example:
By implementing the aforementioned JavaScript logic, you can achieve interactive table hover effects as illustrated below:
angular.module("theApp", [])
.controller("MainCtrl", function($scope) {
$scope.rows = [1, 2, 3, 4]
$scope.games = ['a', 'b', 'c', 'd'];
$scope.hoveredCol = null;
$scope.hoveredRow = null;
$scope.mouseOverTd = function(row, game) {
$scope.hoveredRow = row;
$scope.hoveredCol = game;
};
});
td {
padding: 10px;
}
.highlighted {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="theApp" ng-controller="MainCtrl">
<table ng-mouseleave="hoveredCol = null; hoveredRow = null">
<tr ng-repeat="row in rows">
<td ng-repeat="game in games" ng-mouseover="mouseOverTd(row, game)" ng-class="{highlighted: (hoveredCol == game || hoveredRow == row)}">{{game}}</td>
</tr>
</table>
</div>