在悬停上更改表行和列的背景

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。

为此，请添加一个类，对您的td说class="tablecell"，对您的行添加类似的类。接下来，将这样的内容添加到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;
}

实例：

总而言之，我们得到这样的结论：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

More information on the column highlighting hack here.

JavaScript解决方案

如果您宁愿直接使用JavaScript来避免上述CSS黑客攻击，那么您也可以这样做。然后，您的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")

实例：

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

＆＃13;

＆＃13;

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

＆＃13;

td {
  padding: 10px;
}
.highlighted {
  background-color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;