悬停时更改表格行和列的背景

Question

Noobie 在使用angularJS. 我有一个bootstrap使用ng-repeat. 它是一个矩阵布局，带有行和列标题，我应该如何td row and column在相应的表格单元格上突出显示带有光标的完整内容。

到目前为止，我有一个课程main.css .tdHover{ background-color: red; }，我想在悬停时申请。

这是我html的jade：

 td(ng-repeat='game in games', ng-mouseover="mouseOverTd(game)", ng-class="{??}", style='text-align:center;vertical-align:middle;')

控制器：

angular.module('theApp')
  .controller('MainCtrl', function ($scope, $http, socket) {
    $scope.games= [];
    $scope.idHoveredTD = null;

    $scope.mouseOverTd = function(game){
      window.alert(theme);
      //how should I apply/return class to apply?
    };
    //mouseout remove class?  

Answer 1

有两种方法可以解决这个问题。一种不涉及 JavaScript，但涉及一些有点 hacky 的 CSS。另一种方法使用 ng-mouseover 正如您所想的那样。我更喜欢 CSS 方法，因为这意味着我的表格的外观完全由 CSS 控制，感觉更整洁。下面介绍这两种方法。

纯 CSS 解决方案

当您使用纯CSS悬停时，您实际上可以影响表格的外观- 您根本不需要使用 JavaScript。

为此，请添加一个类，class="tablecell"对您的 td说，并在您的行中添加一个类似的类。接下来，将这样的内容添加到您的 main.css 中：

.tablerow:hover, .tablecell:hover {
    background-color:red
}

这样就完成了三分之二的工作——行和单元格！

列更难，因为它们没有专门的元素来监视悬停。相反，我们可以使用一些 CSS 技巧——制作一个巨大的高亮元素，并剪掉它在表格上方和下方溢出的边缘。

table { 
    overflow: hidden;
}
.tablecell {
    position:relative;
}

.tablecell:hover::before {
    content:"";
    position: absolute;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
    /* keep it below table content */
    background-color: red;
}

现场示例：

把它们放在一起，我们得到这样的东西：

.tablerow:hover, .tablecell:hover {
    background-color:red
}

table { 
    overflow: hidden;
}
.tablecell {
    position:relative;
}

.tablecell:hover::before {
    content:"";
    position: absolute;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
    /* keep it below table content */
    background-color: red;
}

有关此处突出显示 hack 的列的更多信息。

JavaScript 解决方案

如果您更愿意直接使用 JavaScript 来避免上述 CSS hack，您也可以这样做。然后，您的 mouseOverTd 函数需要记录当前悬停在哪一行和哪列上。然后 ng-class 属性需要检查当前悬停的行和列是否与该单元格的行或列匹配。

像这样的东西：

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

还有你的 HTML（或者更确切地说是 Jade）：

td(ng-repeat="game in games", ng-mouseover="mouseOverTd(row, game)" ng-class="{highlighted: (hoveredCol == game || hoveredRow == row)}") {{game}}

当然，您需要确保重置hoveredCol以及hoveredRow当鼠标离开桌子时，还要添加如下内容：

table(ng-mouseleave="hoveredCol = null; hoveredRow = null")

现场示例：

把这一切付诸实践，我们得到这样的结果：

table {
      overflow: hidden;
    }
    .tablecell {
      position: relative;
    }
    .tablecell:hover::before {
      content: "";
      position: absolute;
      left: 0;
      top: -5000px;
      height: 10000px;
      width: 100%;
      z-index: -1;
      /* keep it below table content */
      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>

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